5

私は2つのdivを持っています。1つは固定幅である必要があり、もう1つはユーザーのデバイスに応答します。現在、特定の幅を下回ると、フロートされたdivは別々の行にジャンプします。する方法はありますか...

1）両方とも体の高さ100％にする

2）左側のdivが最小/最大幅を維持しながら、右側のdivの幅を縮小できるように、同じ線上にとどまりますか？

また、70％の適切なdivが、使用可能なスペースの70％を完全に埋めることはありません。

私がやろうとしていることは、ちょっとした撞着語であることに気づきましたが、それを回避する方法を考えることはできません。

http://jsfiddle.net/establish/fxQfv/

HTML

<article>
</article>

<section>
</section>

CSS

article  { 
background: blue;
float: left;
height: 100px;
width: 30%;
min-width: 200px;
max-width: 200px;
}

section  { 
background: red;
float: left;
height: 100px;
width: 70%;
}

</ p>

4

3 に答える 3

0

http://jsfiddle.net/fxQfv/3/

article  { 
    background: blue;
    height: 100px;
    width: 30%;
    float:left;
    min-width: 200px;
    max-width: 200px;
}

section  { 
    background: red;
    height: 100px;
    width: auto;
}

身長の問題については、次の記事をご覧ください：http: //www.alistapart.com/articles/fauxcolumns/ </ p>

于 2012-04-13T18:37:56.123 に答える
0

あなたの問題はこれらの2行です：

min-width: 200px;
max-width: 200px;

彼らはこの線と矛盾します：

width: 30%;

はsection常に幅の70％になりますが、articleは常に200pxです。これらの2行を削除すると、機能します。

記事が必要な場合は200px、セクションをである必要がありますがwidth: auto、その動作がすべてのブラウザで保証されているかどうかはわかりません。

于 2012-04-13T18:40:22.813 に答える
0

2つの要素を別々に使ってあなたのアイデアを実現できるとは思いません。代わりに、に入れ<article>て<section>、セクションを作成します

section  {
width: 100%;
}​

このように、<section>は常に行にフィットし、<article>は固定幅のままにすることができます。<article>また、設定によって幅max-width = max-heightが置き換えられるため、のパーセント幅を入力する必要はありません。

http://jsfiddle.net/fxQfv/4/

于 2012-04-13T18:51:11.827 に答える