отзывчивая разница между делами - PullRequest
Новая
       10

отзывчивая разница между делами

0 голосов
/ 29 ноября 2018

Я хочу добавить поле между 2 делениями, но по какой-то причине, когда я это делаю, второе деление переходит под первое. 

<div style="background-color: rgba(220, 220, 220, 0.5); padding: 5px;">
  <p> </p>
  <div style="width: 50%; height: 100%; float: left; border-radius: 5px; color: white; background-color: rgba(220, 220, 220, 0.5); padding: 5px; margin: 5px;">
    <p class="responsive_text_big_bold" style="text-align: center;">Интериорна и екстериорна фотография</p>
    <p> </p>
    <p class="responsive_text">Професионално заснемане на интериор и екстериор в град Пловдив и Пазарджик (хотели, апартаменти, ресторанти, ландшафт, заводи, производствени помещения, офиси, административни сгради и други). Създаване на интерактивни панорами и панорамни изображения.
      Гаранция за качество на разумна цена. </p>
    <p> </p>
    <p><a class="rspbld-button btn btn-primary" href="bg/%D1%83%D1%81%D0%BB%D1%83%D0%B3%D0%B8/%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D0%B8%D0%BE%D1%80%D0%BD%D0%B0-%D0%B8-%D0%B5%D0%BA%D1%81%D1%82%D0%B5%D1%80%D0%B8%D0%BE%D1%80%D0%BD%D0%B0-%D1%84%D0%BE%D1%82%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D1%8F"
        target=""> Виж повече... </a> </p>
  </div>
  <div style="width: 50%; height: 100%; float: left; border-radius: 5px; color: white; background-color: rgba(220, 220, 220, 0.5); padding: 5px; margin: 5px;">
    <p class="responsive_text_big_bold" style="text-align: center;">Продуктова и сток фотография</p>
    <p> </p>
    <p class="responsive_text">Професионално заснемане на артикули и продукти в град Пловдив и Пазарджик за онлайн магазини, брошури, каталози, меню, уеб сайтове и други рекламни материали. </p>
    <p> </p>
    <p><a class="rspbld-button btn btn-primary" href="bg/%D1%83%D1%81%D0%BB%D1%83%D0%B3%D0%B8/%D1%81%D1%82%D0%BE%D0%BA-%D0%BF%D1%80%D0%BE%D0%B4%D1%83%D0%BA%D1%82%D0%BE%D0%B2%D0%B0-%D1%84%D0%BE%D1%82%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D1%8F" target=""> Виж повече... </a></p>
  </div>
</div>

Вот пример с полями: https://www.nikolay100.com/en/?option=com_rspagebuilder&view=page&id=3

И это без полей: https://www.nikolay100.com/en/?option=com_rspagebuilder&view=page&id=4

Также я непонять, почему весь контент в главном / верхнем диве не отображается внутри него.Похоже, он пуст.Я хочу, чтобы он был фоном для 2-х элементов внутри него.

Заранее благодарен за помощь.

Ответы [ 5 ]

0 голосов
/ 29 ноября 2018

Как утверждают люди, проблема заключается в том, что ширина элементов равна 50%, а верхний предел равен 50% + 50% + 5px + 5px> 100%, что делает невозможным их отображение рядом с элементами.друг друга.

Более простой способ сделать похожий макет может быть с использованием flexbox-макетов (например, https://css -tricks.com / snippets / css / a-guide-to-flexbox /), которые действительно хороши для размещения элементов рядом друг с другом с динамическими желобами (пространство между элементами в сетке макета).

0 голосов
/ 29 ноября 2018

Вы можете следовать шаблону ниже, оба контейнера вы можете установить на 49% и один для перемещения влево, а другой для перемещения вправо.

см. Фрагмент кода ниже. 

<div style="width: 100%; background-color: yellow; height: 100%">
	<div style="float:left; width: 49%; background-color: red;">leftside</div>
	<div style="float:right; width: 49%; background-color: green;">rightside</div>
</div>
0 голосов
/ 29 ноября 2018

Вам необходимо удалить margin из 50% width и box-sizing: border-box; для добавления padding в width 

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
<div style="background-color: rgba(220, 220, 220, 0.5); padding: 5px;">
  <p> </p>
  <div style="width: calc(50% - 10px); height: 100%; float: left; border-radius: 5px; color: white; background-color: rgba(220, 220, 220, 0.5); padding: 5px; margin: 5px;">
    <p class="responsive_text_big_bold" style="text-align: center;">Интериорна и екстериорна фотография</p>
    <p> </p>
    <p class="responsive_text">Професионално заснемане на интериор и екстериор в град Пловдив и Пазарджик (хотели, апартаменти, ресторанти, ландшафт, заводи, производствени помещения, офиси, административни сгради и други). Създаване на интерактивни панорами и панорамни изображения.
      Гаранция за качество на разумна цена. </p>
    <p> </p>
    <p><a class="rspbld-button btn btn-primary" href="bg/%D1%83%D1%81%D0%BB%D1%83%D0%B3%D0%B8/%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D0%B8%D0%BE%D1%80%D0%BD%D0%B0-%D0%B8-%D0%B5%D0%BA%D1%81%D1%82%D0%B5%D1%80%D0%B8%D0%BE%D1%80%D0%BD%D0%B0-%D1%84%D0%BE%D1%82%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D1%8F"
        target=""> Виж повече... </a> </p>
  </div>
  <div style="width: calc(50% - 10px); height: 100%; float: left; border-radius: 5px; color: white; background-color: rgba(220, 220, 220, 0.5); padding: 5px; margin: 5px;">
    <p class="responsive_text_big_bold" style="text-align: center;">Продуктова и сток фотография</p>
    <p> </p>
    <p class="responsive_text">Професионално заснемане на артикули и продукти в град Пловдив и Пазарджик за онлайн магазини, брошури, каталози, меню, уеб сайтове и други рекламни материали. </p>
    <p> </p>
    <p><a class="rspbld-button btn btn-primary" href="bg/%D1%83%D1%81%D0%BB%D1%83%D0%B3%D0%B8/%D1%81%D1%82%D0%BE%D0%BA-%D0%BF%D1%80%D0%BE%D0%B4%D1%83%D0%BA%D1%82%D0%BE%D0%B2%D0%B0-%D1%84%D0%BE%D1%82%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D1%8F" target=""> Виж повече... </a></p>
  </div>
</div>
0 голосов
/ 29 ноября 2018

Оба div имеют ширину 50%, некоторые поля и отступы.Сделайте расчет, который бы вычел отступы и отступы.Например: 

width: calc(50% - 20px);
height: 100%;
float: left;
border-radius: 5px;
color: white;
background-color: rgba(220, 220, 220, 0.5);
padding: 5px;
margin: 5px;

В общем, вам нужно вывести из 50% то, что вы имеете в пикселях для полей и отступов 5 пикселей с каждой стороны = 10 пикселей, ну и даже для полей - получить надо отнять 20 пикселей- вот и пишем то, что в ширину.

Это было переведено с deepl.com

В общем, вам нужно вычесть из 50% того, что вы посчитали в пикселях для поля иотступ 5 пикселей с каждой стороны = 10 пикселей, а также для поля - нам нужно убрать 20 пикселей - это то, что мы пишем по ширине.

0 голосов
/ 29 ноября 2018

Ваши деления расположены один под другим, так как вы установили ширину 50% для каждого деления.Поскольку вы не использовали размер блока, к этому добавляется ваш отступ, а затем к нему добавляется маржа, поэтому ширина от ваших делений составляет 100% + 40px, если учитывать все отступы и поля.

Вместо того, чтобы плавать ваши div, я бы использовал flex на контейнере, и он заставил бы div оставаться в одной строке (даже если они слишком широкие, он пересчитает ширину, чтобы соответствовать).Это также дает вам дополнительный бонус равных высот для дочерних элементов div, и вам не нужно беспокоиться об очистке ваших поплавков (таким образом устраняя проблему с родителем).

Ниже я удалил высоту и поплавокиз встроенных стилей и только что добавил flex - размер окна не является обязательным, я просто хотел бы добавить его, чтобы у вас было более согласованное поведение между браузерами, когда вы добавляете отступы и устанавливаете ширину. 

* {
  box-sizing: border-box;  /* add this so padding is included in width */
}

.container {
  display:flex;   /* add this to your container instead of using floats, this will force both divs to be in the same row */
}
<div style="background-color: rgba(220, 220, 220, 0.5); padding: 5px;" class="container">
  <p> </p>
  <div style="width:50%; border-radius: 5px; color: white; background-color: rgba(220, 220, 220, 0.5); padding: 5px; margin: 5px;">
    <p class="responsive_text_big_bold" style="text-align: center;">Интериорна и екстериорна фотография</p>
    <p> </p>
    <p class="responsive_text">Професионално заснемане на интериор и екстериор в град Пловдив и Пазарджик (хотели, апартаменти, ресторанти, ландшафт, заводи, производствени помещения, офиси, административни сгради и други). Създаване на интерактивни панорами и панорамни изображения.
      Гаранция за качество на разумна цена. </p>
    <p> </p>
    <p><a class="rspbld-button btn btn-primary" href="bg/%D1%83%D1%81%D0%BB%D1%83%D0%B3%D0%B8/%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D0%B8%D0%BE%D1%80%D0%BD%D0%B0-%D0%B8-%D0%B5%D0%BA%D1%81%D1%82%D0%B5%D1%80%D0%B8%D0%BE%D1%80%D0%BD%D0%B0-%D1%84%D0%BE%D1%82%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D1%8F"
        target=""> Виж повече... </a> </p>
  </div>
  <div style="width:50%; border-radius: 5px; color: white; background-color: rgba(220, 220, 220, 0.5); padding: 5px; margin: 5px;">
    <p class="responsive_text_big_bold" style="text-align: center;">Продуктова и сток фотография</p>
    <p> </p>
    <p class="responsive_text">Професионално заснемане на артикули и продукти в град Пловдив и Пазарджик за онлайн магазини, брошури, каталози, меню, уеб сайтове и други рекламни материали. </p>
    <p> </p>
    <p><a class="rspbld-button btn btn-primary" href="bg/%D1%83%D1%81%D0%BB%D1%83%D0%B3%D0%B8/%D1%81%D1%82%D0%BE%D0%BA-%D0%BF%D1%80%D0%BE%D0%B4%D1%83%D0%BA%D1%82%D0%BE%D0%B2%D0%B0-%D1%84%D0%BE%D1%82%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D1%8F" target=""> Виж повече... </a></p>
  </div>
</div>

Ps вы действительно должны использовать таблицу стилей, а не встроенные стили, так как она намного более удобна в обслуживании и может значительно сократить количество раздуваемых с помощью повторного использованияклассы

...