変数の浮動小数点浮動小数点

Question

変数の高さを持つdivの隣にdivを浮動小数点にしたい。表示インラインブロックを使用して、隣同士のdivを浮動小数点にする方法です。各ブロック間の余分なスペースを削除するにはどうすればよいですか？

は（どのように私は以下の強調表示黄色のスペースを削除することができます）以下

私のコード

body { 
 
    font-family: "Tahoma", Geneva, sans-serif; 
 
    font-size: 15px; 
 
} 
 
.block, 
 
.block li { 
 
    display: block; 
 
} 
 
.block { 
 
    width: 960px; 
 
    margin: 10px; 
 
    padding: 10px; 
 
    background: rgba(0, 80, 140, 0.3); 
 
} 
 
.block li { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    list-style: none; 
 
    background: rgba(255, 0, 0, 0.4); 
 
    width: 290px; 
 
    margin: 0 10px 10px 0; 
 
    padding: 5px; 
 
} 
 
.block li:nth-child(3n) { 
 
    margin: 0 0 10px 0; 
 
    background: rgba(0, 255, 0, 0.6); 
 
} 
 
.block li:nth-child(3n-1) { 
 
    background: rgba(0, 0, 255, 0.5); 
 
}

<ul class="block"> 
 
    <li> 
 
    Some content here. 
 
    <br />More content. 
 
    <br />Even more content. 
 
    <br />Enough content for now. 
 
    <br /> 
 
    </li> 
 

 
    <li> 
 
    Some content here. 
 
    <br />More content. 
 
    <br />Even more content. 
 
    <br />More content please. 
 
    <br />And some more 
 
    <br />Enough content for now. 
 
    <br /> 
 
    </li> 
 

 
    <li> 
 
    Some content here. 
 
    <br />More content. 
 
    <br />Even more content. 
 
    <br />Enough content for now. 
 
    <br /> 
 
    </li> 
 

 
    <li> 
 
    Some content here. 
 
    <br />More content. 
 
    <br />Even more content. 
 
    <br />More content. 
 
    <br />Even more content. 
 
    <br /> 
 
    </li> 
 

 
    <li> 
 
    Some content here. 
 
    <br />More content. 
 
    <br />Even more content. 
 
    <br /> 
 
    </li> 
 

 
    <li> 
 
    Some content here. 
 
    <br />More content. 
 
    <br />Even more content. 
 
    <br />Enough content for now. 
 
    <br /> 
 
    </li> 
 

 
    <li> 
 
    Some content here. 
 
    <br />More content. 
 
    <br />Even more content. 
 
    <br />More content. 
 
    <br />Even more content. 
 
    <br /> 
 
    </li> 
 

 
    <li> 
 
    Some content here. 
 
    <br />More content. 
 
    <br />Even more content. 
 
    <br /> 
 
    </li> 
 

 
    <li> 
 
    Some content here. 
 
    <br />More content. 
 
    <br />Even more content. 
 
    <br />Enough content for now. 
 
    <br /> 
 
    </li> 
 

 
    <li> 
 
    Some content here. 
 
    <br />More content. 
 
    <br />Even more content. 
 
    <br />More content. 
 
    <br />Even more content. 
 
    <br /> 
 
    </li> 
 

 
    <li> 
 
    Some content here. 
 
    <br />More content. 
 
    <br />Even more content. 
 
    <br /> 
 
    </li> 
 

 
    <li> 
 
    Some content here. 
 
    <br />More content. 
 
    <br />Even more content. 
 
    <br />Enough content for now. 
 
    <br /> 
 
    </li> 
 
</ul>

Answer 1

jQueryのinnerHeight()を使用してハックです。お役に立てれば。ブロック間の

var liElementHeights = []; 
 
$(".block li").map(function(){ 
 
    liElementHeights.push($(this).innerHeight()); 
 
}); 
 
//console.log(liElementHeights); 
 
var maxHeight = Math.max.apply(null, liElementHeights); 
 
//console.log(maxHeight); 
 
$(".block li").map(function(){ 
 
    $(this).innerHeight(maxHeight); 
 
});

body { 
 
    font-family: "Tahoma", Geneva, sans-serif; 
 
    font-size: 15px; 
 
} 
 
.block, 
 
.block li { 
 
    display: block; 
 
} 
 
.block { 
 
    width: 960px; 
 
    margin: 10px; 
 
    padding: 10px; 
 
    background: rgba(0, 80, 140, 0.3); 
 
} 
 
.block li { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    list-style: none; 
 
    background: rgba(255, 0, 0, 0.4); 
 
    width: 290px; 
 
    margin: 0 10px 10px 0; 
 
    padding: 5px; 
 
} 
 
.block li:nth-child(3n) { 
 
    margin: 0 0 10px 0; 
 
    background: rgba(0, 255, 0, 0.6); 
 
} 
 
.block li:nth-child(3n-1) { 
 
    background: rgba(0, 0, 255, 0.5); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="block"> 
 
    <li> 
 
    Some content here. 
 
    <br />More content. 
 
    <br />Even more content. 
 
    <br />Enough content for now. 
 
    <br /> 
 
    </li> 
 

 
    <li> 
 
    Some content here. 
 
    <br />More content. 
 
    <br />Even more content. 
 
    <br />More content please. 
 
    <br />And some more 
 
    <br />Enough content for now. 
 
    <br /> 
 
    </li> 
 

 
    <li> 
 
    Some content here. 
 
    <br />More content. 
 
    <br />Even more content. 
 
    <br />Enough content for now. 
 
    <br /> 
 
    </li> 
 

 
    <li> 
 
    Some content here. 
 
    <br />More content. 
 
    <br />Even more content. 
 
    <br />More content. 
 
    <br />Even more content. 
 
    <br /> 
 
    </li> 
 

 
    <li> 
 
    Some content here. 
 
    <br />More content. 
 
    <br />Even more content. 
 
    <br /> 
 
    </li> 
 

 
    <li> 
 
    Some content here. 
 
    <br />More content. 
 
    <br />Even more content. 
 
    <br />Enough content for now. 
 
    <br /> 
 
    </li> 
 

 
    <li> 
 
    Some content here. 
 
    <br />More content. 
 
    <br />Even more content. 
 
    <br />More content. 
 
    <br />Even more content. 
 
    <br /> 
 
    </li> 
 

 
    <li> 
 
    Some content here. 
 
    <br />More content. 
 
    <br />Even more content. 
 
    <br /> 
 
    </li> 
 

 
    <li> 
 
    Some content here. 
 
    <br />More content. 
 
    <br />Even more content. 
 
    <br />Enough content for now. 
 
    <br /> 
 
    </li> 
 

 
    <li> 
 
    Some content here. 
 
    <br />More content. 
 
    <br />Even more content. 
 
    <br />More content. 
 
    <br />Even more content. 
 
    <br /> 
 
    </li> 
 

 
    <li> 
 
    Some content here. 
 
    <br />More content. 
 
    <br />Even more content. 
 
    <br /> 
 
    </li> 
 

 
    <li> 
 
    Some content here. 
 
    <br />More content. 
 
    <br />Even more content. 
 
    <br />Enough content for now. 
 
    <br /> 
 
    </li> 
 
</ul>