HTML / CSS : Feste Marge & Fluid Breite

Wie soll ich das mit CSS:

Ich würde gerne 2 divs oder mehr und Ihre width sollte in percent, aber der Abstand zwischen den divs, die behoben werden sollte, in diesem Beispiel 30px
HTML /CSS : Feste Marge & Fluid Breite

Das problem für mich ist der Abstand zwischen zwei divs, da kann ich die divs in ein div größer und legen Sie Links und rechts padding auf 30px und das ist ok, aber was soll ich mit der Marge zwischen den beiden divs?

Wenn ich versuche, um beispielsweise auf das erste div margin-right:30px; dann die Breite des div wird 70% + 30px was insgesamt mehr als 100% und der zweite div wird nach unten fallen.

Also, was ist die Lösung dafür?

Sobald Sie behoben, die es gibt, verlieren Sie Flüssigkeit 🙂 Ihre beste Wette ist, eine oder die andere
als css ist ein Mist! :)) Ich glaube nicht an Sie!
Die Lösung ist zu warten, bis alle Browser implementieren, calc. Es kann eine Weile dauern...
Sie sir, sind ein held.

InformationsquelleAutor Adam | 2011-03-01

Ist das nah genug?

Live-Demo

HTML:

<div id="container">
    <div id="left"><div id="left2">leftgggg</div></div>
    <div id="right">right</div>
</div>

CSS:

#container {
    margin: 0 30px 0 30px;
    overflow: hidden;
    background: #f3c
}
#left {
    float: left;
    width: 70%;
    position: relative;
    left: -30px;
}
#left2 {
    height: 200px;
    margin: 0 0 0 30px;
    background: #ccc
}
#right {
    height: 200px;
    float: right;
    width: 30%;
    background: #666
}

Clever, und du bekommst ein vote von mir ... aber dann die "Links" - Bereich ist nicht proportional 70%. Um fair zu sein, aus mathematischer Sicht, es ist eine alberne Frage zu stellen 😛
Schön, du hast es geschafft! Aber wie soll ich das mit 5 oder Nummer?
30px können unterteilt werden in 30%/70%, so dass, wenn Sie diese Methode verwenden, um drücken Sie die Links aus, die von 21px, und die rechts von 9px ... dann Pedanten wie mich wird glücklich sein, dünkt mich.

InformationsquelleAutor thirtydot

Fand ich einen Weg, dies zu tun, halten das Verhältnis der breiten der Container genau 70% : 30%. Versuchen Sie dieses, für mich funktioniert...

HTML:

<div id="page">
<div id="a"><div id="aWrap">This is 70% of the available space...</div></div>
<div id="b"><div id="bWrap">This is 30% of the available space...</div></div>
</div>

CSS:

*{
    margin:0;
    padding:0;
}
#page{
    margin:30px;
}
#a{
    width:70%;
    float:left; 
}

#aWrap{
    margin-right:15px;
    background:#aaa;
}
#b{
    width:30%;
    float:right;        

}
#bWrap{
    margin-left:15px;
    background:#ddd;
}

Viel Glück!

InformationsquelleAutor Sonali Kar

1

Calc-Unterstützung ist anständig jetzt, so können Sie verwenden, um mix und match-Einheiten. Mit diesem, können Sie kommen mit etwas, das ziemlich gut funktioniert:

http://jsfiddle.net/CYTTA/1/
```
#a {
    margin-left: 30px;
    width: calc(70% - 30px - 15px);
}

#b {
    margin-left: 30px;
    margin-right: 30px;
    width: calc(30% - 30px - 15px);
}
```
Müssen Sie möglicherweise Präfix calc mit -webkit oder -moz.

Die Breite der ersten beträgt 70% minus am linken Rand (30px) und minus der Hälfte der mittleren Marge (15px). Der zweite ist 30% minus am rechten Rand (30px) und minus der Hälfte der mittleren Marge (15px).

Während die Breite nicht genau gleich 70% und 30%, haben Sie ein fluid-layout mit festen Margen.

InformationsquelleAutor ahuth
0

Es mag offensichtlich sein, und Sie haben wahrscheinlich schon twigged, aber (70% + 30% + 30px) > 100%. Ohne irgendeine Art von rechnerischen Fähigkeit, das funktioniert nicht, und CSS2 scheint nicht zu haben, die Fähigkeit. Javascript könnte es tun, wie ein anderer poster empfohlen hat, und CSS 3 ist durch hinzufügen, offenbar.

Nicht, dass es eine Lösung für deine ursprüngliche Anfrage, aber Sie können erzwingen eine Feste Breite auf der rechten hand-container, und halten die Flüssigkeit auf der linken Seite.
```
<div style="margin-left: 30px; float: right; width: 270px;">
    <p>Content text ...</p>
</div>
<div style="margin-right: 300px;">
    <p>Sidebar text ...</p>
</div>
```
Den original-Kommentator korrekt ist, wenn, Ihre beste Wette ist, eine oder die andere.

InformationsquelleAutor Jeff Parker

Hier meine Lösung.

html

<div id="wrapper">
    <div id="left"></div>
    <div id="rightWrapper">
        <div id="right"></div>
    </div>
</div>

css

#wrapper {
    margin:0 30px;
}

#left {
    width:70%;
    height:200px;
    background:black;
    float:left;
}
#rightWrapper {
    margin-left:99px;
}
#right {
    width:30%;
    height:200px;
    float:right;
    background:grey;
}

Demo: http://jsfiddle.net/GEkG7/1/

InformationsquelleAutor Sotiris

0

Yeah, meine Lösung war ähnlich wie andere. Ein #wrap hat 30px Polsterung #main und #side haben Ihren prozentualen Anteilen eingestellt und schwebte Links und rechts jeweils. #main hat eine extra <div> darin, mit 30px von rechten Rand.

http://jsfiddle.net/Marcel/FdMFh/embedded/result/

Funktioniert in allen modernen Browsern, die ich installiert habe (Chrome, Firefox, Safari, Opera, IE9 RC), ich bin sicher, es werde brechen irgendwo älter, sollte aber reparierbar.

InformationsquelleAutor Marcel
0

Thirtydot hat eine nette Antwort (bis Stimme von mir) zum einstellen der linken Positionierung der div relativ zu seinem container, würde ich nur darauf hin, dass es-Testung, die in bestimmten Browsern, wie z.B. ältere Versionen von Internet Explorer.

Alternativ könntest du überlegen, die Einstellung einer linken position durch einen festen Betrag, ist mehr verwirrend als nur die Anwendung einer anderen Breite.

Ihr auch Fragen, für ein fluid Breite und einer festgelegten Marge, insgesamt ist dies nicht mehr ein fluid layout... Ihr 30px gleich in eine große oder kleine Auflösung.. aber Ihre Breite ändern, entweder reparieren die Breite in Pixel oder die margin-Prozentsatz (Vielleicht versuchen Sie es mit max-width für einige Browser auch für größere Auflösungen). Neuere Browser auch einstellen, ein-pixel-layout, wenn die Erhöhung der text - /zoom-Größe, älteren Browsern erfordern den Einsatz von EMs für die Textgröße.

Beispiel mit Prozentzahlen und Polsterung:
```
#container {
    margin: 0 8% 0 8%;
    overflow: hidden;
    background: #f3c
}
#left {
    float: left;
    width: 62%;
    position: relative;
    padding-right: 8%;
}
```
InformationsquelleAutor Pricey
0

Können Sie die javascript-onload und onresize Funktionen. In jedem Sie zuerst die Breite des container-Gitter und dann berechnen Sie die Breite der 70pc und 30pc raster in Pixel, und legen Sie Sie über JS.

Beispielsweise verwenden Sie den folgenden code in der onload und onresize Funktionen für die Seite:
```
container_width = document.getElementById('container_box').style.width
width_70 = (container_width - 90) * 0.7
width_30 = (container_width - 90) * 0.3
document.getElementById('seventy_pc_box').style.width = width_70
document.getElementById('thirty_pc_box').style.width = width_30
```
InformationsquelleAutor Yasser

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.