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

-1
II337 16 oct. 2019 a las 13:06

4 respuestas

La mejor respuesta

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>
1
MattHamer5 16 oct. 2019 a las 10:14

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>
1
halfer 23 mar. 2020 a las 23:15

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

-1
Rajesh Kumar 16 oct. 2019 a las 10:13

Modificar estilo como -

.footer {
    background-color: #6d757c;
    height: auto;
    float: left;

}

Esto aplicará el mismo color en el pie de página.

0
KutePHP 16 oct. 2019 a las 10:56