だから私は、この幅のdivを作成しようとしている

単一の行に複数のdivをフローティング：だから私は、この幅のdivを作成しようとしている

.number { 
 
    float: left; 
 
    width: 50px; 
 
} 
 
.price { 
 
    float: right; 
 
    width: 50px; 
 
} 
 
.center { 
 
    float: left; 
 
    margin: 0 auto; 
 
} 
 
.clearfix:after { 
 
    content: "."; 
 
    visibility: hidden; 
 
    display: block; 
 
    height: 0; 
 
    clear: both; 
 
} 
 
.clearfix,.number,.center,.price,.extra { 
 
    margin: 5px; 
 
    padding: 5px; 
 
    border: 3px #333 solid; 
 
}

<div class="clearfix"> 
 
    <div class="number">Number</div> 
 
    <div class="center"> 
 
    <div class="extra">Title</div> 
 
    <div class="extra">Description. Description. Description. Description. Description.</div> 
 
    </div> 
 
    <div class="price">Price</div> 
 
</div>

今、私たちは長い説明を追加し、これが

.number { 
 
    float: left; 
 
    width: 50px; 
 
} 
 
.price { 
 
    float: right; 
 
    width: 50px; 
 
} 
 
.center { 
 
    float: left; 
 
    margin: 0 auto; 
 
} 
 
.clearfix:after { 
 
    content: "."; 
 
    visibility: hidden; 
 
    display: block; 
 
    height: 0; 
 
    clear: both; 
 
} 
 
.clearfix,.number,.center,.price,.extra { 
 
    margin: 5px; 
 
    padding: 5px; 
 
    border: 3px #333 solid; 
 
}

<div class="clearfix"> 
 
    <div class="number">Number</div> 
 
    <div class="center"> 
 
    <div class="extra">Title</div> 
 
    <div class="extra">Description. Description. Description. Description. Description. Description. Description. Description. Description. Description. Description. Description. Description. Description. Description. Description. Description. Description. Description. Description. </div> 
 
    </div> 
 
    <div class="price">Price</div> 
 
</div>

起こります

これはCSSでは不可能だが、 "max-width：（100％ - 100px）"なんかを「偽造する」方法があるのは知っていますか？

それは私が、私はちょうどにこのテキストを追加しているどうやら「あなたのポストはほとんどのコードであるように見えます」ので、太字テキストの前にのみ、すべてを追加することは許されなかったすべての下り坂

ここからですシステムを通じて私の質問を得る

出典

2016-04-07 Richard Muthwill

はい、あります。ブラウザの互換性のためのCALCを使用する前にthisを確認し、また、

max-width: calc(100% - 100px);

：あなたはcalcメソッドを使用することができます。

出典

2016-04-07 04:10:56

PS：ボーダー-box' aswellとても奇妙です –

...（私はカルク 'を知らせるいただきありがとうございます：ボックスのサイズ変更は'を忘れないでください） ' [MDN]（https://developer.mozilla.org/en/docs/Web/CSS/calc）が引用しているので、より良い方法がありますか修正してください「これは実験的な技術です」 –

私の更新されたコメントを確認してください –

Calcの互換性があなたのためにできない場合は、floatの代わりにcss table-layoutを使用できます。固定された外側の列のサイズ、および中央の1が記入されます。

.clearfix {display: table; width: 100%;} 
.number {display: table-cell; width: 50px;} 
.center {display: table-cell;} 
.price {display: table-cell; width: 50px;}

https://jsfiddle.net/j4mxzgra/

出典

2016-04-07 04:29:03

私はいつもこれらについて疑問に思っています。ちょうどちょうど

がHTMLの代わりにCSSに書かれていますか？ –

視覚的です。テーブルレイアウトの大きな悪い点は、意味のないテーブル（表形式のデータではなくデザイン）を使用していて、必要であればそれらをcssで調整するのが非常に難しいことでした。しかし、いくつかのCSSレイアウトでは、それらは恩恵になる可能性があります。フレックスボックスモデルは、ターゲットと互換性がある場合にも機能します。 –

はBootstrapフレームワークを使用してみてください。としてそれを使用し、

<div class="col-md-2">Left box</div> 
<div class="col-md-10">Central Box</div> 
<div class="col-md-2">Right box</div> 
//its just basic idea to tell you how you can do it.. 

If you really wanted to use float part, then provide width to div's in % like, 
<div class="small-div">Left box</div> 
<div class="inner-div">Central box</div> 
<div class="small-div">Right box</div>

.small-div{ 
width:20%; 
float:left; 
display:block;} 

.inner-div{ 
width:60%; 
float:left; 
display:block;} 

/*you can the make it responsive by using media screens as */ 
@media only screen and (max-width: 991px) { 
.small-div{ 
    width:25%;} 
.inner-div{ 
    width:50%;} 
} 
@media only screen and (max-width: 767px) { 
.small-div,.inner-div{ 
    width:100%; 
    float:none; 
    margin-left:auto; 
    margin-right:auto;} 
}

出典

2016-04-07 09:06:34

だから私は、この幅のdivを作成しようとしている

答えて

関連する問題