mehrere divs in einer einzigen Reihe

so dass diese Breite divs Ich versuche zu machen:mehrere divs in einer einzigen Reihe

.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>

Nun fügen wir eine längere Beschreibung und dies geschieht

.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>

Ich weiß, das ist in CSS nicht möglich, aber gibt es eine Möglichkeit, "max-width: (100% - 100px)" oder so etwas zu "fälschen"?

Es ist alles bergab von hier

ich nur alles vor dem fett gedruckten Text nicht durfte hinzufügen, weil scheinbar „Es sieht aus wie Sie Ihre Post meist Code“ so bin ich das Hinzufügen gerade diesen Text bekomme meine Frage durch das System

Quelle

2016-04-07 Richard Muthwill

Ja, gibt es. Sie können calc Methode verwenden:

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

, Überprüfen Sie auch this vor für Browser-Kompatibilität mit Calc.

Quelle

2016-04-07 04:10:56

ps: vergessen Sie nicht, 'Box-Sizing: border-box' aswell –

, die so seltsam ist .. Danke mir von' ber wissen zu lassen () ' Gibt es einen besseren Weg oder dies zu beheben obwohl als [MDN] (https://developer.mozilla.org/en/docs/Web/CSS/calc) sagt Zitat " _This ist eine experimentelle Technologie_ " –

Bitte Überprüfen Sie meinen aktualisierten Kommentar –

Wenn die Calc-Kompatibilität es nicht für Sie tut, können Sie CSS-Tabellenlayout statt Floats verwenden. Feste Größen an den äußeren Spalten und die mittlere wird füllen.

.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/

Quelle

2016-04-07 04:29:03

Ich habe mich immer über diese Fragen, ist das nicht nur genau das, was

ist in CSS statt HTML? –

Es ist visuell. Das große Übel mit Tabellenlayout war die Tatsache, dass wir Tabelle nicht-semantisch (Design statt tabellarische Daten) verwendet, und auch, dass diese waren viel schwieriger zu justieren im laufenden Betrieb mit CSS, wenn wir wollten. Für einige CSS-Layout können sie jedoch ein Segen sein. Das Flexbox-Modell kann auch funktionieren, wenn die Kompatibilität für Ihr Ziel funktioniert. –

Try Bootstrap Framework zu verwenden. und verwenden Sie es als,

<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;} 
}

Quelle

2016-04-07 09:06:34

Verwandte Themen

mehrere divs in einer einzigen Reihe

Antwort

Verwandte Themen