3 Boxen inline, Inhaltsausrichtung

Question

Ich habe 3 Boxen mit dynamischem Inhalt, in jeder Box gibt es ein Formular mit Submit-Taste, und einige andere Dinge. Wie man den Effekt vom Bild bekommt.

Höhe der einzelnen Box ist maximal aus allen Boxen. Übermitteln Sie Schaltflächen in einer Zeile, unten.

body { 
 
    width: 720px; 
 
} 
 
form input { 
 
    display: block; 
 
    margin-bottom: 15px; 
 
    width: 100%; 
 
} 
 
form label { 
 
    text-align: left; 
 
    width: 100%; 
 
    display: block; 
 
} 
 
.box-container { 
 
    display: flex; 
 
} 
 
.box { 
 
    border: 1px solid #000; 
 
    flex: 1 1 auto; 
 
    max-width: calc(33% - 2px); 
 
    text-align: center; 
 
    box-sizing: border-box; 
 
    padding: 10px; 
 
} 
 
.box p { 
 
    text-align: justify; 
 
}

<div class="box-container"> 
 
    <div class="box"> 
 
    <h1>bla bla bla</h1> 
 
    <p> some information dasd asd asd asdasdasfs dsgd dfg sdfg fsdg sdfg s</p> 
 
    <form> 
 
     <label>value 1</label> 
 
     <input type="text"/> 
 
     <label>value 2</label> 
 
     <input type="text"/> 
 
     <input type="submit" value="submit"/> 
 
    </form> 
 
    </div> 
 
    <div class="box"> 
 
    <h1>bla bla bladada das dasd asd</h1> 
 
    <p>Longer information<br> some information dasd asd asd asd an</p> 
 
    <form> 
 
     <label>value 1</label> 
 
     <input type="text"/> 
 
     <label>value 2</label> 
 
     <input type="text"/> 
 
     <label>value 3</label> 
 
     <input type="text"/> 
 
     <input type="submit" value="submit"/> 
 
    </form> 
 
    </div> 
 
    <div class="box"> 
 
    <h1>bla bla b</h1> 
 
    <p>Longer information</p> 
 
    <form> 
 
     <label>value 1</label> 
 
     <input type="text"/> 
 
     <input type="submit" value="submit"/> 
 
    </form> 
 
    </div> 
 
<div>

Answer 1

Ok. Danke an euch alle für die Antworten. Ich habe mein Problem gelöst.

form input { 
 
    display: block; 
 
    margin-bottom: 15px; 
 
    width: 100%; 
 
} 
 

 
form label { 
 
    text-align: left; 
 
    width: 100%; 
 
    display: block; 
 
} 
 

 
.box-container { 
 
    display: flex; 
 
} 
 

 
.box { 
 
    border: 1px solid #000; 
 
    flex: 1; 
 
    text-align: center; 
 
    box-sizing: border-box; 
 
    padding: 10px; 
 
} 
 
.box form { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
    height: 100%; 
 
} 
 
.box p { 
 
    text-align: justify; 
 
}

<div class="box-container"> 
 
    <div class="box"> 
 
    <form> 
 
     <div class="top"> 
 
     <h1>bla bla bla</h1> 
 
     <p> some information dasd asd asd asdasdasfs dsgd dfg sdfg fsdg sdfg s</p> 
 
     <label>value 1</label> 
 
     <input type="text" /> 
 
     <label>value 2</label> 
 
     <input type="text" /> 
 
     </div> 
 
     <div class="bottom"> 
 
     <input type="submit" value="submit" /> 
 
     </div> 
 
    </form> 
 
    </div> 
 
    <div class="box"> 
 
    <form> 
 
     <div class="top"> 
 
     <h1>bla bla bladada das dasd asd</h1> 
 
     <p>Longer information<br> some information dasd asd asd asd an</p> 
 
     <label>value 1</label> 
 
     <input type="text" /> 
 
     <label>value 2</label> 
 
     <input type="text" /> 
 
     <label>value 3</label> 
 
     <input type="text" /> 
 
     </div> 
 
    <div class="bottom"> 
 
     <input type="submit" value="submit" /> 
 
    </div> 
 
    </form> 
 
    </div> 
 
    <div class="box"> 
 
    <form> 
 
     <div class="top"> 
 
     <h1>bla bla b</h1> 
 
     <p>Longer information</p> 
 
     <label>value 1</label> 
 
     <input type="text" /> 
 
     </div> 
 
     <div class="bottom"> 
 
     <input type="submit" value="submit" /> 
 
     </div> 
 
    </form> 
 
    </div> 
 
    <div>

Answer 2

Ich schrieb etwas von Grund auf für Sie als Basis zu verwenden.

HTML

<div class="wrapper"> 
    <div> 
     <input type="submit"/> 
    </div> 
    <div> 
     <input type="submit"/> 
    </div> 
    <div> 
     <input type="submit"/> 
    </div> 
</div> 

<div class="clearfix"></div> 

CSS

.wrapper > div { 
    border: 1px solid #000; 
    float: left; 
    width: 250px; 
    height: 300px; 
    margin: 0 10px; 
    position: relative; 
} 

.wrapper { 
    margin: 0 auto; 
    width: 830px; 
} 

.wrapper > div > input[type="submit"] { 
    position: absolute; 
    bottom: 20px; 
    left: 25px; 
    display: block; 
    width: 200px; 
} 

.clearfix:before, .clearfix:after { 
    content: ""; 
    clear: both; 
    display: block; 
} 

Am Ende sieht es so etwas wie dieses. Ich habe .clearfix hinzugefügt, nur für den Fall, dass Sie später weitere Inhalte hinzufügen.

damit here Spielen Sie herum. Hoffentlich kann dir das helfen.

Auch, wenn Sie die Idee der Verwendung der absoluten Position nicht mögen. Ich habe es so gemacht, nur um zu demonstrieren, wie es aussehen wird, ohne den Dummy-Inhalt über den Knöpfen.

Eine Alternative besteht darin, für jeden dieser rechteckigen Knoten einen Wrapper zu erstellen. Deklarieren Sie im Wrapper zwei Divs, die einander überlappen. Das untere Div sollte die Schaltfläche zum Senden enthalten.

Answer 3

Ich hoffe, das ist das, was man braucht. Ich habe flex Eigenschaft zu dem Formular hinzugefügt, um den Platz für alle nehmen verfügbar

body { 
 
    width: 720px; 
 
} 
 

 
form { 
 
    flex: 1 0 auto; 
 
    position: relative; 
 
    padding-bottom: 30px; 
 
} 
 

 
form input { 
 
    display: block; 
 
    margin-bottom: 15px; 
 
    width: 100%; 
 
} 
 

 
form label { 
 
    text-align: left; 
 
    width: 100%; 
 
    display: block; 
 
} 
 

 
form button { 
 
    display: block; 
 
    width: 100%; 
 
    position: absolute; 
 
    bottom: 10px; 
 
} 
 

 
.box-container { 
 
    display: flex; 
 
} 
 

 
.box { 
 
    border: 1px solid #000; 
 
    flex: 1 1 auto; 
 
    max-width: calc(33% - 2px); 
 
    text-align: center; 
 
    box-sizing: border-box; 
 
    padding: 10px; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.box p { 
 
    text-align: justify; 
 
}

<div class="box-container"> 
 
    <div class="box"> 
 
    <div> 
 
     <h1>bla bla bla</h1> 
 
     <p> some information dasd asd asd asdasdasfs dsgd dfg sdfg fsdg sdfg s</p> 
 
    </div> 
 
    <form> 
 
     <label>value 1</label> 
 
     <input type="text" /> 
 
     <label>value 2</label> 
 
     <input type="text" /> 
 
     <button type="submit">Submit</button> 
 
    </form> 
 
    </div> 
 
    <div class="box"> 
 
    <h1>bla bla bladada das dasd asd</h1> 
 
    <p>Longer information<br> some information dasd asd asd asd an</p> 
 
    <form> 
 
     <label>value 1</label> 
 
     <input type="text" /> 
 
     <label>value 2</label> 
 
     <input type="text" /> 
 
     <label>value 3</label> 
 
     <input type="text" /> 
 
     <button type="submit">Submit</button> 
 
    </form> 
 
    </div> 
 
    <div class="box"> 
 
    <h1>bla bla b</h1> 
 
    <p>Longer information</p> 
 
    <form> 
 
     <label>value 1</label> 
 
     <input type="text" /> 
 
     <button type="submit">Submit</button> 
 
    </form> 
 
    </div> 
 
    <div>

Answer 4

flex-direction: column; auf die Überschrift, Inhalt hinzufügen und Form und setzte justify-content: flex-end zu bilden, und es wird die Frage

beheben

.box h1, 
.box p, 
.box form { 
    display: flex; 
    flex-direction: column; 
    width: 100%; 
} 
.box form { 
    justify-content: flex-end; 
} 

form input { 
 
    display: block; 
 
    margin-bottom: 15px; 
 
    width: 100%; 
 
} 
 

 
form label { 
 
    text-align: left; 
 
    width: 100%; 
 
    display: block; 
 
} 
 

 
.box-container { 
 
    display: flex; 
 
} 
 

 
.box { 
 
    border: 1px solid #000; 
 
    flex: 1 1 auto; 
 
    max-width: calc(33% - 2px); 
 
    text-align: center; 
 
    box-sizing: border-box; 
 
    padding: 10px; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.box p { 
 
    text-align: justify; 
 
} 
 

 
.box h1, 
 
.box p, 
 
.box form { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 100%; 
 
} 
 

 
.box form { 
 
    justify-content: flex-end; 
 
}

<div class="box-container"> 
 
    <div class="box"> 
 
    <h1>bla bla bla</h1> 
 
    <p> some information dasd asd asd asdasdasfs dsgd dfg sdfg fsdg sdfg s</p> 
 
    <form> 
 
     <label>value 1</label> 
 
     <input type="text" /> 
 
     <label>value 2</label> 
 
     <input type="text" /> 
 
     <input type="submit" value="submit" /> 
 
    </form> 
 
    </div> 
 
    <div class="box"> 
 
    <h1>bla bla bladada das dasd asd</h1> 
 
    <p>Longer information 
 
     <br> some information dasd asd asd asd an</p> 
 
    <form> 
 
     <label>value 1</label> 
 
     <input type="text" /> 
 
     <label>value 2</label> 
 
     <input type="text" /> 
 
     <label>value 3</label> 
 
     <input type="text" /> 
 
     <input type="submit" value="submit" /> 
 
    </form> 
 
    </div> 
 
    <div class="box"> 
 
    <h1>bla bla b</h1> 
 
    <p>Longer information</p> 
 
    <form> 
 
     <label>value 1</label> 
 
     <input type="text" /> 
 
     <input type="submit" value="submit" /> 
 
    </form> 
 
    </div> 
 
    <div>

Answer 5

Ich habe der zweiten und dritten Spalte einen gewissen linken Rand für den Abstand hinzugefügt. Ich habe absolut unten einen neuen Knopf Wrapper mit Polsterung positioniert, um es zentral zu positionieren. Ich habe etwas Polster unten auf der Box hinzugefügt, um zu verhindern, dass die Schaltfläche den Inhalt überlappt. Dies würde zur Ausgabe führen, wenn der Button größer oder der Button-Text in eine andere Zeile eingepackt wird, aber es ist die beste Lösung, die ich mir vorstellen kann.

form input { 
 
    display: block; 
 
    margin-bottom: 15px; 
 
    width: 100%; 
 
} 
 
form label { 
 
    text-align: left; 
 
    width: 100%; 
 
    display: block; 
 
} 
 
.box-container { 
 
    display: flex; 
 
    padding: 5px; 
 
} 
 
.box { 
 
    flex: 1 1 auto; 
 
    border: 1px solid #000; 
 
    width: 33.333%; 
 
    text-align: center; 
 
    box-sizing: border-box; 
 
    padding: 10px 10px 40px; 
 
    margin-left: 10px; 
 
    position: relative; 
 
} 
 
.box:first-child { 
 
    margin-left: 0; 
 
} 
 
.box p { 
 
    text-align: justify; 
 
} 
 
.button-wrap { 
 
    position: absolute; 
 
    bottom:0; 
 
    left: 0; 
 
    right:0; 
 
    padding:10px; 
 
} 
 
.button-wrap input { 
 
    margin:0; 
 
}

<div class="box-container"> 
 
    <div class="box"> 
 
    <h1>bla bla bla</h1> 
 
    <p> some information dasd asd asd asdasdasfs dsgd dfg sdfg fsdg sdfg s</p> 
 
    <form> 
 
     <label>value 1</label> 
 
     <input type="text"/> 
 
     <label>value 2</label> 
 
     <input type="text"/> 
 
\t \t \t <div class="button-wrap"> 
 
\t \t \t \t <input type="submit" value="submit"/> 
 
\t \t \t </div> 
 
    </form> 
 
    </div> 
 
    <div class="box"> 
 
    <h1>bla bla bladada das dasd asd</h1> 
 
    <p>Longer information<br> some information dasd asd asd asd an</p> 
 
    <form> 
 
     <label>value 1</label> 
 
     <input type="text"/> 
 
     <label>value 2</label> 
 
     <input type="text"/> 
 
     <label>value 3</label> 
 
     <input type="text"/> 
 
\t \t \t <div class="button-wrap"> 
 
\t \t \t \t <input type="submit" value="submit"/> 
 
\t \t \t </div> 
 
    </form> 
 
    </div> 
 
    <div class="box"> 
 
    <h1>bla bla b</h1> 
 
    <p>Longer information</p> 
 
    <form> 
 
     <label>value 1</label> 
 
     <input type="text"/> 
 
\t \t \t <div class="button-wrap"> 
 
\t \t \t \t <input type="submit" value="submit"/> 
 
\t \t \t </div> 
 
    </form> 
 
    </div> 
 
<div>