1

Ситуация следующая: необходимо разделить секцию на 2 (две) равные части. Слева белая, справа серая. Сверху этих двух секций лежит текст(левая часть) и форма(правая часть). Этот контент не должен уходить за рамки .container, в то время как фон слева и фон справа должны растягиваться на весь .wrapper (1920px) .

Также, помимо белого фона на левой части лежит картинка. Я вроде бы понял, что она должны располагаться абсолютно этого блока, но вот как растянуть блок на всю ширину, но при этом контент двух блоков сохранить в рамках .container .

Пробовал несколько вариантов.. с .container-fluid - тогда всё растягивается на всю ширину и контент не исключение. Пробовал располагать без .container вовсе, тогда нет границ.

Должно же быть какое-то решение... заранее благодарен!

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="text-block col-lg-6 col-md-6 col-sm-6 col-xs-12">
      <p><strong>Колбаса “Львовская”</strong> на ваш стол</p>
      <p>Вся продукция TM «ERICREN» изготовлена по традиционным рецептам ,что позволило добиться превосходных вкусовых качеств мясных изделий.</p>
    </div>

    <div class=" form-block col-lg-6 col-md-6 col-sm-6 col-xs-12">
      <form>
        <div class="input-group">
          <span class="input-group-addon"></span>
          <input type="text" class="form-control" name="name" placeholder="Ваше имя">
        </div>


        <div class="input-group">
          <span class="input-group-addon"></span>
          <input type="email" class="form-control" name="email" placeholder="Email">
        </div>

        <div class="input-group">
          <span class="input-group-addon"></span>
          <input type="email" class="form-control" name="email" placeholder="Email">
        </div>

        <div class="input-group">
          <span class="input-group-addon"></span>
          <select class="form-control" id="kind">
											<option>Выбрать изделие</option>
											<option>Изделие 1</option>
											<option>Изделие 2</option>
											<option>Изделие 3</option>
										</select>
        </div>

        <div class="input-group">
          <span class="input-group-addon"></span>
          <textarea class="form-control" rows="5" id="comment"></textarea>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>
    </div>
  </div>
</div>

вот итог...

Сейчас это выглядит вот так.. собственно текст необходимо сместить слева и справа, чтобы он не вылазил за рамки контейнера. введите сюда описание изображения

7
  • добавьте ваш код и скриншотом покажите что необходимо
    – soledar10
    9 июн 2017 в 10:10
  • отредактировал. css не добавлял, смысла нет. меня интересует разметка только. а все остальное надеюсь додумаю.. 9 июн 2017 в 10:20
  • такой вариант подойдет? - jsfiddle.net/oaLhykgr
    – soledar10
    10 июн 2017 в 10:02
  • @soledar10 да! Фон да , подскажите изображение как растягивать на всю половину враппера , то есть за рамки контейнера? 10 июн 2017 в 13:09
  • С абсолютным позиционированием не получается , так как текст тоже располагается абсолютно 10 июн 2017 в 13:12

1 ответ 1

1

Может кому-то в будущем пригодится

.section-form-bg {
	position: relative;
}
.section-form-bg > .container {
	position: relative;
	z-index: 1;
}
.section-form-bg > .container .text-block {
	color: #fff;
}
.section-form-bg:before,
.section-form-bg:after {
	content: " ";
	display: block;
	position: absolute;
	height: 100%;
	top: 0px;
	bottom: 0px;
	z-index: 0;
}
.section-form-bg:before {
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	background-image: url('https://ichigarev.ru/wp-content/uploads/2017/10/kids2.jpg');
	left: 0px;
	right: 50%;
}
.section-form-bg:after {
	right: 0px;
	left: 50%;
}
.section-form-bg:after,
.form-block {
	background-color: #ccc;
}
@media (max-width: 767px){
	.section-form-bg:before,
	.section-form-bg:after {
		display: none;
	}
	.text-block {
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: cover;
		background-image: url('https://ichigarev.ru/wp-content/uploads/2017/10/kids2.jpg');
	}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid section">
	<div class="row section-form">
		<div class="section-form-bg">
			<div class="container">
				<div class="row">
					<div class="text-block col-lg-6 col-md-6 col-sm-6 col-xs-12">
						<h2><strong>Колбаса “Львовская”</strong> на ваш стол</h2>
						<p>Вся продукция TM «ERICREN» изготовлена по традиционным рецептам ,что позволило добиться превосходных вкусовых качеств мясных изделий.</p>
					</div>
					<div class=" form-block col-lg-6 col-md-6 col-sm-6 col-xs-12">
						<h2 class="form-block-title text-center">Заказать сейчас</h2>
						<form>
							<div class="input-group">
								<span class="input-group-addon"></span>
								<input type="text" class="form-control" name="name" placeholder="Ваше имя">
							</div>
							<div class="input-group">
								<span class="input-group-addon"></span>
								<input type="email" class="form-control" name="email" placeholder="Email">
							</div>
							<div class="input-group">
								<span class="input-group-addon"></span>
								<input type="email" class="form-control" name="email" placeholder="Email">
							</div>
							<div class="input-group">
								<span class="input-group-addon"></span>
								<select class="form-control" id="kind">
									<option>Выбрать изделие</option>
									<option>Изделие 1</option>
									<option>Изделие 2</option>
									<option>Изделие 3</option>
								</select>
							</div>
							<div class="input-group">
								<span class="input-group-addon"></span>
								<textarea class="form-control" rows="5" id="comment"></textarea>
							</div>
							<button type="submit" class="btn btn-primary">Submit</button>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.