web-dev-qa-db-de.com

Lassen Sie einen Inline-Block-Div zu 100% der verbleibenden Breite übernehmen

Ich habe 3 div-Blöcke in einer anderen div.

Was ich wollte, ist, sie inline zu setzen, aber die ersten 2 div-Blöcke sollten entsprechend ihrem Inhalt eine Breite und die letzten div den verbleibenden Platz einnehmen.

<div class="container">
    <div class="red">Red</div>
    <div class="green">Green</div>
    <div class="blue">Blue</div>
</div>

Ich versuche, die Verwendung von festen Breiten zu vermeiden, da ich dies in einem responsiven Design verwenden muss.

Wie kann ich die blaue div in diese Geige den verbleibenden verfügbaren Platz des übergeordneten Elements übernehmen und reagieren, wenn die Bildschirmgröße geändert wird?

htmlcsshtml5css3responsive-design
14
Diego

Ich glaube, wenn Sie keine Pixel- oder prozentuale Breite angeben möchten und die roten und grünen Container nur so breit wie der Inhalt machen möchten, müssen Sie sie in ihren eigenen Container namens .left einschließen:

<div class="container">
    <div class="left">
        <div class="red">Red</div>
        <div class="green">green</div>
    </div>
    <div class="blue">blue</div>
</div>

Wenn Sie jetzt .left nach links und .left div nach links verschieben, müssen Sie jetzt keine Inline-Block-Elemente mehr angeben. Der blaue Container nimmt einfach so viel Speicherplatz in Anspruch, wie er bis zum Ende des .container zur Verfügung steht.

.left {
    float: left;
}

.left div {
    float: left;
}

Fiddle

Bearbeiten

Albern, der .left-Container wird offensichtlich nicht benötigt, solange Sie einfach float: left zu Ihren roten und grünen Blöcken hinzufügen, genau wie @Ennui oben in den Kommentaren sagte :) 

Aktualisierte Geige

6
Elise

float: left das Rot und Grün und das Blau erhalten width: clac(100% - 100px)

.blue {
    width: calc(100% - 100px);
}

http://jsfiddle.net/6kLVn/190/

8
URL87

Ändern Sie Ihre CSS zu diesem:

.container{border: 2px solid black; padding: 5px; position: relative; width: 100%;}

.container div {height: 20px;}

.red{border: 2px solid red; display: block; float: left;}

.green{border: 2px solid green; display: block; float: left;}

.blue{border: 2px solid blue;}

In Chrome getestet

EDIT

Dumm mich, das ist das gegabelte jsfiddle: http://jsfiddle.net/BWRVk/

2
Agustin Meriles

Wenn Sie möchten, dass es anspricht, geben Sie divs% widths an.

http://jsfiddle.net/feitla/6kLVn/6/

.container div {height: 20px;}

.red{border: 2px solid red;width:10%;display:inline;}

.green{border: 2px solid green;width:10%; display: inline;}

.blue{border: 2px solid blue;display:inline-block;width:80%;}
1
feitla

Ich denke, es hängt alles davon ab, was Ihre Bilder sein sollen. Ich habe nur% für die Bilder verwendet, um zu zeigen, dass die Größe entsprechend dem responsiven Design angepasst werden kann. http://jsfiddle.net/6kLVn/7/

HTML

<div class="container">
    <div class="red">Red</div>
    <div class="green">green</div>
    <div class="blue">blue</div>
</div>

CSS

.container{border: 2px solid black; padding: 5px; position: relative; margin:0px; width: 100%;}

.container div {height: 20px; display: inline-block; padding:0px; margin:0px;}

.red{border: 2px solid red; width:31%; }

.green{border: 2px solid green;width:31%;}

.blue{border: 2px solid blue;width:31%;}
1
Keith