0

私は3つのフィールドセットを持っています。

私が作りたいのはこのレイアウトです：ここに画像の説明を入力

右下のフィールドセットを下に揃えたいので、下が左のフィールドセットに揃えられます。

さまざまな解像度で動作するはずです。

簡単な方法はありますか？または、javascript を使用してマージントップを動的に追加する必要がありますか?

コード：

<div class="fieldSetsContainer">
<fieldset class="leftFieldSet">test
    <br/>test
    <br/>test
    <br/>test
    <br/>test
    <br/>test
    <br/>
</fieldset>
<div class="rightFieldSets">
    <fieldset>test2</fieldset>
    <fieldset class="bottomRightFieldSet">test3</fieldset>
</div>

CSS:

.rightFieldSets {
float:left;
width:34%;
}
.rightFieldSets fieldset {
clear:left;
width:89%;
}
.leftFieldSet {
width:62%;
float:left;
margin-right:1px;
}
.bottomRightFieldSet {
margin-top:6px;
}

ここにリンクがあります： http://jsfiddle.net/bbryK/

4

2 に答える 2

2

私のソリューションは、次の 2 つのことを前提としています。

  • 右の列は固定幅です。
  • 左の列は常に最も高くなければなりません。

http://jsfiddle.net/c3AFP/2/を参照

HTML 構造:

<div class="container">
    <div class="right">
        <fieldset class="top"></fieldset>
        <fieldset class="bottom"></fieldset>
    </div>
    <fieldset class="left"></fieldset>
</div>

CSS スタイル:

.container {
    position: relative;
}
.top, .bottom {
    width: 300px;
}
.left {
    margin-right: 300px;
}
.right {
    float: right;
    margin-left: 10px;
}
.bottom {
    position: absolute;
    bottom: 0;
}

編集：

右側の列のサイズがパーセンテージになっているソリューションを次に示します: http://jsfiddle.net/c3AFP/5/

編集2：

これは、左の列が最も高いという要件を削除するテーブルベースのソリューションです。使用vertical-alignすると、最も高い要素に対して小さい要素を配置する場所を調整できます: http://jsfiddle.net/c3AFP/7/

于 2013-10-20T17:04:52.617 に答える
1

私はあなたにフィドルの出発点を与えています。遊んで、いくつかのコードを作成し、同じものを共有してください。

http://jsfiddle.net/vY462/

#one{width:200px;height:70px;border:2px solid black;float:left;}
#two,#three{width:200px;height:25px;border:2px solid black;float:right;margin-top:5px;}

<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
于 2013-10-20T16:31:34.593 に答える