1

ul2 s で作成しようとしていますliが、それらは水平に設定されます。現在の様子は次のとおりです。

ここに画像の説明を入力してください

ご覧のとおり、左のli高さは右の高さよりも低くなっています。左のものと右のものを同じにしたいです。また、この Web サイトではBootstrapを使用しています。これが私のコードです：

<ul class="thumbnails <?php echo $pageLang; ?>">
    <li class="span6" >
        <div class="commentsArea">
            <h3>dsfdsfd</h3>
            <p></p>
        </div>
    </li>
    <li class="span6 <?php echo $pageLang;?>">
        <label>Name</label>
        <input type="text" class="span6">
        <label>Description:</label>
        <textarea class="span6" rows="5" maxlength="450"></textarea>
        <button class="btn btn-success" value="button">
    </li>
</ul>

関連する CSS:

.commentsArea {
    background-color: #D4E7ED;
    text-overflow: ellipsis;
    -webkit-border-radius: 10px 5px 5px 10px;
    border-radius: 10px 5px 5px 10px;
    -moz-border-radius: 10px 5px 5px 10px;
    padding: 5px;
}

高さを 100%に設定しようとしましcommentsAreaたが、役に立ちませんでした。また、左のli高さを「ハードコード」(たとえば、height=228px) に設定すると、正常に動作します。

(1)と(2)を同じ高さにする方法はありますか?

4

2 に答える 2

2

固定の高さを使用できる場合は、以下の CSS を追加してください

.thumnails li {
    height: 228px;
}

または任意の高さが必要です。

于 2013-03-31T13:33:14.827 に答える
2

ulこのようなマークアップにはandを使用しないことをお勧めしますli。を使用して達成するのは非常に簡単divsです。実際、それはリストの適切な使い方のようには見えません。

<div class="thumbnails thumbnails-cont">
    <div class="span4 comments-cont">
        <div class="commentsArea">
            <h3>dsfdsfd</h3>
            <p></p>
        </div>
    </div>
    <div class="span4 offset4">
        <label>Name</label>
        <input type="text" class="span6">
        <label>Description:</label>
        <textarea class="span6" rows="5" maxlength="450"></textarea>
        <button class="btn btn-success" value="button">Test</button>
    </div>
</div>

CSS:

.thumbnails-cont {
    position: relative;
}
.comments-cont {
    position: absolute;
    top: 0;
    bottom: 0;
}

http://jsfiddle.net/n2VGS/

于 2013-03-31T13:07:18.873 に答える