0

下の画像とこの jsfiddleのように、最初の列が最初の列を占め、残りが右側の列を占めるように<div>、2 つの列に配置する必要がある3 つの連続した s があります。jsfiddle では、制約を使用して s を強制的に配置しています。これは、制約を使用せずに別の方法で達成できますか? sの順序は変更できません。<div>widthfloatwidth<div>

レイアウト

<div>できるだけ少ない固定幅を使用するソリューションをお勧めします。

4

5 に答える 5

1

固定配置とパーセンテージ幅を使用してそれを行うことができます。

CSS コード:

.image {
    position:fixed;
    top:0px;
    left:0px;
    width:75%;
    height:100%;
}
.summary {
    position:fixed;
    top:0px;
    left:75%;
    width:25%;
    height:50%;
}
.info {
    position:fixed;
    top:50%;
    left:75%;
    width:25%;
    height:50%;
}
于 2012-12-25T15:49:05.467 に答える
1

右の div からを削除し、左の div の幅よりも少し大きいものfloatを追加できます- http://jsfiddle.net/cx6VJ/2/margin-left

左の div の幅を固定したくない場合は、幅とマージン左の両方をパーセンテージで設定できます。

于 2012-12-25T15:45:24.277 に答える
0

@ Amit と @ user1823713 によって提供されたヘルプのおかげで、私はそれらの回答の組み合わせを使用して、<div>s の相対位置を保持し、幅をコンテナーの幅に適合させるものを取得しました。結果のjsfiddleは次のとおりです。

このレイアウトは変更せずにコンテナーにプラグインでき、最終的にコンテナーに単一の幅を設定して、レイアウト全体の幅を制限します。

レイアウト

于 2012-12-25T17:31:56.837 に答える
-1

Flexboxはこれに理想的な選択肢かもしれませんが、サポートはまだ普及していません。columnsIE9以前では機能しないことを気にしない場合は、これを使用できます。MozillaとWebkitのプレフィックスを追加する必要があります。

http://jsfiddle.net/cx6VJ/4/

#container {
    background-color: orange;
    width: 408px;
    columns: 2;
}

#container > div {
 /*   break-inside: avoid-column;*/
}

#left {
    border: 2px solid green;
    min-height: 200px;
    break-after: column;
}

.right {
    border: 2px solid blue;
    height: 50px;
}

#red {
    border: 2px solid red;
}

意図的にright要素をデモよりも小さくしましたが、サイズを200ピクセルに増やすことができ、それでも目的のレイアウトを維持できます。

http://caniuse.com/#feat=multicolumn

于 2012-12-25T15:54:24.423 に答える
-1

これを提供しているのは、次のように求められたからです。

できるだけ少ない固定幅を使用するソリューションをお勧めします。

div のないソリューションを次に示します (テーブルを使用します)。

http://jsfiddle.net/Ma9EE/

<table>
<tr><td rowspan="2">Image</td>
  <td>summary</td></tr>
  <tr><td>info</td></tr>
</table>
于 2012-12-25T15:54:01.213 に答える