Quiero colocar 3 divs diferentes uno al lado del otro con un color de fondo.
Intenté flotar todo a la izquierda y funciona, pero el color de fondo desaparece. Si no los floto, están alineados uno debajo del otro, pero el color de fondo está ahí.
.wrapper {
width: 1222px;
margin: auto;
}
.footer {
background-color: #6d757c;
}
footer .footercategory {
float:left;
}
.footercategory li {
color: black;
font-family: NewsGothicBTWebCondRegular, "Trebuchet MS", Arial, sans-serif;
font-size: 1.3em;
padding: 0 10px 0 10px;
}
<footer class="footer">
<section class="wrapper">
<div class="footercategory">
<div>
<h1>Payment</h1>
<ul>
<li>
<span>Lastschrift</span>
</li>
<li>
<span>Lastschrift</span>
</li>
<li>
<span>Lastschrift</span>
</li>
</ul>
</div>
</div>
<!-- ROW 2 -->
<div class="footercategory">
<div>
<h1>Unsere Zahlarten</h1>
<ul>
<li>
<span>Lastschrift</span>
</li>
<li>
<span>Lastschrift</span>
</li>
<li>
<span>Lastschrift</span>
</li>
</ul>
</div>
</div>
<!-- ROW 3 -->
<div class="footercategory">
<div>
<h1>Unsere Zahlarten</h1>
<ul>
<li>
<span>Lastschrift</span>
</li>
<li>
<span>Lastschrift</span>
</li>
<li>
<span>Lastschrift</span>
</li>
</ul>
</div>
</div>
</section>
</footer>
Si floto todo lo que queda, están uno al lado del otro pero sin fondo
4 respuestas
Esto se puede hacer fácilmente con el uso de flex
. Hacer que su clase .wrapper
use flexbox alineará los elementos secundarios uno al lado del otro. Para el color de fondo, si desea que el fondo permanezca consistente en las 3 columnas, configure background-color
en el elemento footer
. De lo contrario, si desea que los colores de fondo difieran, configure cada uno por separado en cada clase .footercategory
.
.footer {
background-color:#6d757c;
}
.wrapper {
display:flex;
}
.footercategory {
flex:1;
}
<footer class="footer">
<section class="wrapper">
<div class="footercategory">
<div>
<h1>Payment</h1>
<ul>
<li>
<span>Lastschrift</span>
</li>
<li>
<span>Lastschrift</span>
</li>
<li>
<span>Lastschrift</span>
</li>
</ul>
</div>
</div>
<!-- ROW 2 -->
<div class="footercategory">
<div>
<h1>Unsere Zahlarten</h1>
<ul>
<li>
<span>Lastschrift</span>
</li>
<li>
<span>Lastschrift</span>
</li>
<li>
<span>Lastschrift</span>
</li>
</ul>
</div>
</div>
<!-- ROW 3 -->
<div class="footercategory">
<div>
<h1>Unsere Zahlarten</h1>
<ul>
<li>
<span>Lastschrift</span>
</li>
<li>
<span>Lastschrift</span>
</li>
<li>
<span>Lastschrift</span>
</li>
</ul>
</div>
</div>
</section>
</footer>
Así es como flexionaría tres div de lado a lado, también he agregado cierta capacidad de respuesta para que tenga una idea de cómo puede manipular las cajas en pantallas de diferentes tamaños.
.section {
width: 100%;
margin: 0 auto;
}
.section .section-inner {
width: 100%;
max-width: 1248px;
margin: 0 auto; /* centers container */
padding: 10px; /* this combined with the margin in the divs will make the margins appear consistent */
box-sizing: border-box;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: row; /* sort into rows */
align-items: center;
justify-content: space-between;
text-align: center;
background-color: rgba(255,100,100,0.25);
}
.section .section-inner div {
width: calc((100% / 3) - 20px); /* calculate width for maximum accuracy | minus margin */
margin: 10px; /* space between boxes */
padding: 20px; /* space inside boxes */
box-sizing: border-box; /* calculates border and padding in width */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: column; /* sort into columns */
align-items: center;
justify-content: center;
flex-grow: 1; /* forces singular div that falls beneath to be full width */
background-color: rgba(0,0,0,0.25);
}
@media screen and (min-width: 640px) and (max-width: 1023px) {
.section .section-inner div {
width: calc((100% / 2) - 20px); /* calculate width for maximum accuracy | minus margin */
}
}
@media screen and (max-width: 639px) {
.section .section-inner div {
width: 100%; /* calculate width for maximum accuracy | minus margin */
}
}
.section .section-inner div h1 {
margin-bottom: 20px;
}
<section class="section">
<div class="section-inner">
<div>
<h1>Lorem ipsum </h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis nemo quas dolor optio autem! Veniam, dolore neque nam harum quae excepturi distinctio optio explicabo ipsum laudantium nesciunt et autem a.</p>
</div>
<div>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis nemo quas dolor optio autem! Veniam, dolore neque nam harum quae excepturi distinctio optio explicabo ipsum laudantium nesciunt et autem a.</p>
</div>
<div>
<h1>Lorem ipsum </h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis nemo quas dolor optio autem! Veniam, dolore neque nam harum quae excepturi distinctio optio explicabo ipsum laudantium nesciunt et autem a.</p>
</div>
</div>
</section>
Agregue el color de fondo que desea agregar a la etiqueta <section class="wrapper"></section>
y proporcione un ancho del 100%.
Entonces, si usa bootstrap, dé la clase md-col-4 para cada divs.
Si no usa bootstrap, proporcione el ancho manualmente como ancho: 33% y display: inline-block a cada divs
Modificar estilo como -
.footer {
background-color: #6d757c;
height: auto;
float: left;
}
Esto aplicará el mismo color en el pie de página.
Nuevas preguntas
html
HTML (HyperText Markup Language) es el lenguaje de marcado para crear páginas web y otra información que se mostrará en un navegador web. Las preguntas sobre HTML deben incluir un ejemplo mínimo reproducible y una idea de lo que está tratando de lograr. Esta etiqueta rara vez se usa sola y, a menudo, se combina con [CSS] y [javascript].