3

3 つの列 (div は左に浮いている) があり、それぞれの幅は 30% プラス 3% のパディングです。各列には幅 100 ピクセルの画像が含まれます。各画像の横に、その横にタイトル/説明を入れたいと思います。これは、その列の残りのスペースを占有します.

CSS で数学を実行できないことはわかっているので、次のようなことはできませんwidth: 33% - 100px;(できれば素晴らしいことです)。JavaScript で判断できましたが、可能であれば、このタスクに JS を使用しないようにしています。誰かが私がそうする必要のないより良いデザインを思い付くことができるかどうかを知りたい.

このフィドルで私の例を見てください。

ここに私のHTMLがあります:

<div class="column3 item" style="border-right:1px dotted #CCC;">
    <img src="images/items/item1.jpg" />
    <div>
        <b>Item 1</b>
        <p>Some kind of description about the item goes here.</p>
    </div>
</div>
<div class="column3 item" style="border-right:1px dotted #CCC;">
    <img src="images/items/item2.jpg" />
    <div>
        <b>Item 2</b>
        <p>Some kind of description about the item goes here.</p>
    </div>
</div>
<div class="column3 item clearfix">
    <img src="images/items/item3.jpg" />
    <div>
        <b>Item 3</b>
        <p>Some kind of description about the item goes here.</p>
    </div>
</div>

そして関連する CSS:

.column3 {
    float: left;
    width: 30%;
    height: 100px;
    padding: 0 1.5%;
}

.column3 > div {
    float: left;
    margin-left: 15px;
}

.column3 > div > p {
    display: inline-block;
}

.item img {
    float: left;
    width: 100px;
    height: 100px;
}

したがって、残りのスペースを占めるように内側の div の幅を設定する方法を理解する必要があります。resizeJSでこれを行うことができることは知っていますが、ユーザーがページのサイズを変更すると、その幅が自動的に調整され（JSイベントリスナーを呼び出さなくても）、すべてのスタイリングが保持されるように、CSSソリューションが本当に好きです複雑さを軽減します。

このコードはどれも決まったものではないので、より良い HTML/CSS 構造を提案できれば、それは完全に受け入れられる解決策です。

4

3 に答える 3

2

これを探していますか？

デモ

CSS:

.column3 {
    float: left;
    width: 30%;
    height: 100px;
    position:relative;
    padding: 0 1.5%;
}
.column3 > div {
    display:inline-block;
    border: 1px solid #0ff;
    margin-left:100px;
    padding-left:-100px;
}
.column3 > div > p {
    display: inline-block;
}
.item img {
    width: 100px;
    height: 100px;
    position: absolute;
    top:0;
    left:0;
}
/* clearfix */
 .clearfix:before, .clearfix:after {
    content:"";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1;
    /* For IE 6/7 (trigger hasLayout) */
}
/* END clearfix */

HTML:

<div class="column3 item" style="border-right:1px dotted #CCC;">
    <img src="http://dummyimage.com/100x100/000/fff" />
    <div> <b>Item 1</b>
        <p>Some kind of description about the item goes here.</p>
    </div>
</div>
<div class="column3 item" style="border-right:1px dotted #CCC;">
    <img src="http://dummyimage.com/100x100/000/fff" />
    <div> <b>Item 2</b>
        <p>Some kind of description about the item goes here.</p>
    </div>
</div>
<div class="column3 item clearfix">
    <img src="http://dummyimage.com/100x100/000/fff" />
    <div> <b>Item 3</b>
        <p>Some kind of description about the item goes here.</p>
    </div>
</div>
于 2013-05-17T06:12:05.850 に答える
0

CSS3で計算できます。

width: calc(100% - 30% - 3%); /* width 100% minus column width, minus padding */

また

width: calc(100% - 100px); /* width 100% minus image width */

もちろん、ベンダー プレフィックスを使用します。

width: -webkit-calc(100% - 30% - 3%); /* width 100% minus column width, minus padding */
width: -moz-calc(100% - 30% - 3%); /* width 100% minus column width, minus padding */
width: -o-calc(100% - 30% - 3%); /* width 100% minus column width, minus padding */
width: -ms-calc(100% - 30% - 3%); /* width 100% minus column width, minus padding */
width: calc(100% - 30% - 3%); /* width 100% minus column width, minus padding */

掛け算、割り算、必要なことは何でもできます。David Walsh がさらにいくつかの例を挙げています: http://davidwalsh.name/css-calc。具体的にサポートしているブラウザーも確認できます: http://caniuse.com/calc。Opera は、それをサポートしていない唯一の最新のブラウザですが、現在進行中です...

于 2013-05-17T04:22:42.563 に答える
0

内側のフロートを削除しdiv、余白を画像の横に収まる十分な大きさにします。

.column3 > div {
    margin-left: 105px;
}

これの唯一の欠点は、説明が画像の高さよりも長い場合、画像の下に流れず、横に残ることです。マージンを完全に削除し、代わりにp display: inline.

于 2013-05-17T03:56:18.913 に答える