-1

配置

js を使用せずに上記の配置を構築するにはどうすればよいですか?

前もって感謝します ！

#div3 {
    display: inline-block;
}
#div1 {
    min-width: 150px;
    float: left;
}

#div2 {
    max-width: 100%;
    float: left;
}

http://jsfiddle.net/XCDsu/4/ - 2 番目の div をコンテンツに合わせるにはどうすればよいですか? 最初のものはパーセントではなく150pxでなければなりません

4

3 に答える 3

2

他の回答のこれらの手法にはすべて共通の問題があります。width彼らは最初の列の が であると想定していますが150px、実際には である必要min-widthがあります150px。では、最初の列を大きくする必要がある場合はどうなるでしょうか?

私の解決策を見てください。純粋な CSS、使用せずcalc(したがって、IE8 などの古いブラウザーでもサポートされます)

働くフィドル

HTML:ここに新しいものはありません..

<div id="Container">
    <div id="Column1">content</div>
    <div id="Column2">content of second div is very  very large</div>
</div>

CSS:

#Container
{
    width: 80%; /*Change to WTE you want*/
    display: table;
    border: 1px solid black;
    margin: 0 auto;
}
#Container > div
{
    display: table-cell;
}
#Column1
{
    background-color: red;
    min-width: 150px; /*From your CSS*/
}

#Column2
{
    background-color: green;
}
于 2013-09-25T12:06:29.897 に答える
1

widthが に#div1固定され150pxていて動的である場合は#div3、次を使用できます。

#div2 {
    width : calc(100% - 150px);
}

また、動的でもある場合#div1は、JS を使用する必要があります。

于 2013-09-25T11:49:07.987 に答える