リストアイテムからなる単純なレイアウトをテストしています。ここでは、最後のボタンを前のボタンと同じ高さにしたいと考えています。ここリスト内のボタンをリスト要素と同じ高さにします
ここで簡単なコード
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li> <!--This one should be a button-->
</ul>
である私は絶対に必要な場合を除き、スクリプトを避けるためにしようとしていますFIDDLE
です。
リスト項目の高さを固定したくないですか？あなたがしない場合は、スクリプトを使用したくない場合は、私の頭の上から：
前のリスト項目と同じコピーを含む最後のliに段落要素を追加します。絶対にそれは変換のトリックを使用してのli項目と中央の0位置のボタンにその段落の不透明度を設定します。
button {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%);
}
それは少し厄介だが、私は一定の高さを使用して、または使用以外にも、別の方法を考えることはできませんスクリプト。
固定高さはオプションではありませんので、おそらくスクリプトを使用する必要があります – user1751287
少しきれいです確かに。あなたがそれを避けようとしているなら、私が上に掲げた方法はうまくいくはずです。 –
あなたはフレックスとブートストラップのルールを上書きした場合、それは簡単に行うことができNDあなたも、リンクの内容を揃えることがあります。https://jsfiddle.net/fr6gachf/2/
body {
background-color: #e4e5e7!important;/* ?? [email protected] with the code snippet ? */
}
ul {
list-style: none;
display: flex;
flex-wrap: wrap;
padding:0;
}
li {
width: 20%;
margin: 20px 0 0;
;
}
li div.test-wrapper {
background-color: #fff;
margin-bottom: 25px
}
li div.test-wrapper a,
li div.test-wrapper {
display: flex;
height: 100%;
}
li div.test-wrapper a {
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<ul>
<li class="col-sm-3">
<div class="test-wrapper text-center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque leo lacus, congue at arcu at, gravida congue orci. Fusce id tempor orci, nec efficitur ex. Mauris vitae nunc dui. Donec dui justo, pulvinar ut congue vitae, tempor porta sem. Q
</div>
</li>
<li class="col-sm-3">
<div class="test-wrapper text-center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque leo lacus, congue at arcu at, gravida congue orci. Fusce id tempor orci, nec efficitur ex. Mauris vitae nunc dui. Donec dui justo, pulvinar ut congue vitae, tempor porta sem. Q
</div>
</li>
<li class="col-sm-3">
<div class="test-wrapper text-center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque leo lacus, congue at arcu at, gravida congue orci. Fusce id tempor orci, nec efficitur ex. Mauris vitae nunc dui. Donec dui justo, pulvinar ut congue vitae, tempor porta sem. Q
</div>
</li>
<li class="col-sm-3">
<div class="test-wrapper text-center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque leo lacus, congue at arcu at, gravida congue orci. Fusce id tempor orci, nec efficitur ex. Mauris vitae nunc dui. Donec dui justo, pulvinar ut congue vitae, tempor porta sem. Q
</div>
</li>
<li class="col-sm-3">
<div class="test-wrapper text-center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque leo lacus, congue at arcu at, gravida congue orci. Fusce id tempor orci, nec efficitur ex. Mauris vitae nunc dui. Donec dui justo, pulvinar ut congue vitae, tempor porta sem. Q
</div>
</li>
<li class="col-sm-3">
<div class="test-wrapper text-center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque leo lacus, congue at arcu at, gravida congue orci. Fusce id tempor orci, nec efficitur ex. Mauris vitae nunc dui. Donec dui justo, pulvinar ut congue vitae, tempor porta sem. Q
</div>
</li>
<li class="col-sm-3">
<div class="test-wrapper text-center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque leo lacus, congue at arcu at, gravida congue orci. Fusce id tempor orci, nec efficitur ex. Mauris vitae nunc dui. Donec dui justo, pulvinar ut congue vitae, tempor porta sem. Q
</div>
</li>
<li class="col-sm-3">
<div class="test-wrapper text-center">
<a href="#">this is button</a>
</div>
</li>
</ul>私は、スクリプトを使用するために持っていると思いますそれをするために。
var maxHeight = Math.max.apply(null, $("ul li").map(function()
{
return $(this).height();
}).get());
$('.button').css('height', maxHeight-25+"px");
最初の部分は、すべてのli要素の最大高さを取得し、それがボタンに設定します。私はこのためのjQueryを使用し、ここではコードです。
あなたはCSSで 'li'要素に固定された高さを設定するか、スクリプトを使用して高さを計算して設定することができ、私は、スクリプトがここで必要とされていると思います。 –
はい私はオプションがなく、おそらくスクリプトで高さを計算し、すべてが応答するのでボタンに渡す必要があります – user1751287