Проблемы с отображением содержимого

У меня проблема с выравниванием двух разных элементов, где они параллельны по горизонтали. Я хочу, чтобы вторая сетка right_service_wrap появилась в правой части страницы, как и left_service_wrap. Я не уверен, что я делаю неправильно, что поплавок справа появляется ниже left_service_wrap.Проблемы с отображением содержимого

У кого-нибудь есть идеи?

.left_service_wrap { 
 

 
} 
 
.right_service_wrap { 
 
\t float: right; 
 
\t display: inline; 
 
} 
 
.title_left { 
 
\t margin-left: 20%; 
 
} 
 
.title_right { 
 
\t 
 
} 
 
.service_wrapper { 
 
\t border: 1px solid black; 
 
\t margin: 15px; 
 
\t width: 20%; 
 
} 
 
.service_list { 
 
\t margin-left: 20%; 
 
}

<div class="left_service_wrap"> 
 
\t <div class="title_left">A LIST OF OUR SERVICES</div> 
 
\t <div class="service_list"> 
 
\t \t <div class="service_wrapper"> 
 
\t \t \t <div class="service_title">Flooring</div> 
 
\t \t \t <div class="service_description">The best floors!</div> 
 
\t \t </div> 
 
\t \t <div class="service_wrapper"> 
 
\t \t \t <div class="service_title">Roofing</div> 
 
\t \t \t <div class="service_description">Your roof will be perfect!</div> 
 
\t \t </div> 
 
\t \t <div class="service_wrapper"> 
 
\t \t \t <div class="service_title">Siding</div> 
 
\t \t \t <div class="service_description">mmmm siding.</div> 
 
\t \t </div> 
 
\t \t <div class="service_wrapper"> 
 
\t \t \t <div class="service_title">Paint</div> 
 
\t \t \t <div class="service_description">Fabulous paint!</div> 
 
\t \t </div> 
 
\t \t <div class="service_wrapper"> 
 
\t \t \t <div class="service_title">Kitchen Remodels</div> 
 
\t \t \t <div class="service_description">Pretty kitchen.</div> 
 
\t \t </div> 
 
\t </div> 
 
</div> \t 
 
<div class="right_service_wrap"> 
 
\t <div class="title_right">A LIST OF OUR SERVICES</div> 
 
</div> \t

источник

2015-12-29 Becky

Установите ширину и до 50% и сделать:

.left_service_wrap { 
    float:left; 
    width:50%; 
} 
.right_service_wrap { 
    float: left; 
    width:50%; 
}

Работа демо здесь: https://jsfiddle.net/usrce45v/

Учтите, что ваше требование о дополнительном левом поле, которое необходимо применить к левому контейнеру, требует перестановки ширины как левого, так и правого контейнеров. Таким образом, для left-margin из 20% уравнение становится: полная ширина родителя (100%) минус маржа (20%), половина результата (40%).

источник

2015-12-29 21:04:38 wiredolphin

Я добавил ширину: 50% ; для каждого, но он по-прежнему не правильно позиционируется. Я хотел, чтобы левые столбцы начинались с поля слева: 20%; площадь. Он толкает его и делает мои границы меньше, чем они должны быть – Becky

Мой сайт можно увидеть в другом ответе. – Becky

Должен ли я настроить все мои дочерние div на 50%, поэтому они меньше, чем они были раньше? – Becky

Я не уверен, если я полностью понимаю ваш вопрос, но если это то, что я думаю, вы должны добавить float: left правилу .left_service_wrap класса. (И определить ширину для него, что позволяет элементы в нем будут отображаться по желанию)

источник

2015-12-29 21:00:34 Johannes

Хорошо, это подводит его, но это делает его полностью смятым. Вот живой сайт: http://realtorcatch.com/service – Becky

Я добавил 'ширина: 50%; для каждого, но он по-прежнему не правильно позиционируется. Я хотел, чтобы левые столбцы начинались с поля «margin-left: 20%; площадь. Это продвигает его и делает мои границы меньше, чем они должны быть. – Becky

Имейте в виду, что значения процентной ширины всегда относятся к родительскому элементу - вам придется отрегулировать их, например, дать '.product_wrapper' и' .service_wrapper' 'width: 50%;' – Johannes

Проблемы с отображением содержимого

ответ

Смежные вопросы