html

Question

最初の列が画像で、2番目の列がテキストである2つの列が必要です。可能であれば、htmlテーブルの使用は避けたいと思います。2番目の列のテキストを左揃えにして、画像と整列し、ページ幅の残りの部分に移動するようにします

最初の列で次のようなことができることがわかります。

 #left_col {
       float:left;
        width: 650px;
    }

しかし、2番目の正しいCSSを理解することはできません（Webで見たすべての例では、正しい列が右揃えになっています）。最初の列が固定され、2番目の列が左（画像の右側）に配置される2つの列を持つCSSの最良の方法は何ですか？

score 1 · Accepted Answer

次のようなことを試してみてください。

#image, #text{
    position: absolute;
}
#image {
    top: 0;
    width: 650px;
}
#text {
    top: 0;
    left: 650px;
    right: 0;
}

score 0 · Accepted Answer

2つの列のCSSはまったく同じで、幅は全幅の半分になります。これは基本的なグリッドレイアウトです。さらに詳しく調べたい場合は:)

score 0 · Accepted Answer

私がそれを正しく理解したなら...

<div id="left_col">
    Content
</div>
<div id="main">
    Content
</div>

#left_col {
    float: left;
    width: 650px;
}

#main {
    margin-left: 650px;
}

score 0 · Accepted Answer

http://jsfiddle.net/EyKZ7/を確認し、2番目の列widthをデフォルトautoのままにします。残りのスペースが必要になります

html - 最初が固定されている2つの左揃えの列を持つcssの最良の方法は何ですか？