Простой CSS "body → wrapper → column" - тело берет фон столбца? - PullRequest
Новая
       10

Простой CSS "body → wrapper → column" - тело берет фон столбца?

0 голосов
/ 22 сентября 2018

ЦЕЛЬ: сделать фон первого и последнего столбца расширенным до края DOC width , сохраняя внутреннюю оболочку содержимого.Таким образом, красный будет простираться до левого края, синий будет простираться до правого края , но текст останется в центре.

ПРОБЛЕМЫ: переменная # столбцов, столбцовфоны с инлайн стиль.Я хочу, чтобы внешние фоновые изображения столбцов были расширены до правого и левого краев области просмотра, но содержимое оставалось внутри оболочки, чтобы текст не появлялся неожиданно.Посмотрите это видео на YouTube (https://www.youtube.com/watch?v=DSj5fGAJBP0)

Есть идеи, как это сделать, учитывая 2 вопроса выше?Я предполагаю, что это потребует дополнительной разметки.

РЕДАКТИРОВАТЬ: Вот изображение, чтобы проиллюстрировать то, что я хочу достичь: пример изображения фона со столбцами и оболочки 

.wrapper {
	width: 600px;
	margin: auto;
}
.col-6 {
	width: 50%;
	float: left;
}
.clearfix:after {
    content: "";
    display: table;
    table-layout: fixed;
    clear: both;
}
<div class="wrapper clearfix">
	<div class="col-6" style="background-color: red">
		<p>content inside the first div. e word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Fof</p>
	</div>
	<div class="col-6" style="background-color: blue">
		<p>content inside the second div. em Ipsum unorum et Malorum" </p>
	</div>
</div>

A Более сложный пример для демонстрации нужной мне гибкости: 

.wrapper {
	width: 600px;
	margin: auto;
}
.col-6 {
	width: 50%;
	float: left;
}
.col-3 {
    width: 25%;
    float: left;
}
.clearfix:after {
    content: "";
    display: table;
    table-layout: fixed;
    clear: both;
}
<div class="wrapper clearfix">
	<div class="col-3" style="background-color: red">
		<p>content inside the first div. e word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Fof</p>
	</div>
	<div class="col-6" style="background-color: blue">
		<p>content inside the second div. em Ipsum unorum et Malorum" </p>
	</div>
	<div class="col-3" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/c/c3/Highland_soldier_1744.jpg'); background-size: cover">
		<p>content inside the third div. em Ipsum unorum et Malorum" </p>
	</div>
</div>
...