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 principal para crear páginas web y otra información que se mostrará en un navegador web. Las preguntas sobre HTML deben incluir un ejemplo reproducible mínimo y alguna idea de lo que está tratando de lograr. Esta etiqueta rara vez se usa sola y a menudo se combina con [CSS] y [javascript].