0

以下は私のコードとフィドルです：http：//jsfiddle.net/hehUt/2/

<div class="one"></div>
<div class="two">text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text heretext here text here text here  text here text here text here text here text here text here text here re text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text heretext here text here text here  text here text here text here text here text here text here text here 
</div>​
.one {
    background-color: red;
    height: 75px;
    width: 75px;
    float: left;
}
.two {
    margin-left: 75px;
}​

2つのdivを液体レイアウトで並べて配置し、使用可能なすべてのスペースを占有するようにします。また、テキストを画像の後に折り返すのではなく、垂直方向に揃えておく必要があります。これはすべて正常に機能しています。

ただし、div.oneの幅が変更されたとすると、div.twoに適用されるマージンを変更する必要があります。これを回避する方法はありますか？たとえば、div.oneの幅がCMSのコンテンツによって非常に多様に設定されている場合、CMSにマージンpx値をdiv.twoに適用させる必要がありますか、それともさまざまな幅のdivで機能するCSSソリューションがありますか？ 。1？ありがとう

4

3 に答える 3

1

overflow: hidden;の代わりに行うだけですmargin-left。リトル デモ:リトル リンク. overflow: hidden;floated.twoと交差しないように強制し.oneます。

于 2012-09-20T14:04:18.283 に答える
0

http://jsfiddle.net/iambriansreed/hehUt/7/

display: table-cell非常に便利であることがわかりました。

.wrap {
    display: table-row;
}
.one {
    display: table-cell;
    background-color: red;
    height: 75px;
    width: 75px;
}
.two {
    display: table-cell;
}​
于 2012-09-20T13:57:49.010 に答える
-1 
.one
{
     width:30%;
}

.two
{
     width:40%;
}

.three
{
     width:30%;
}

これは、あなたの望むことですか？

于 2012-09-20T13:57:19.353 に答える