时间戳

首页 > 解决方案 > div之间的响应边距

html - div之间的响应边距

问题描述

我想在 2 个 div 之间添加一个边距，但由于某种原因，当我这样做时，第二个 div 低于第一个。

<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

我也不明白为什么 main/top div 中的全部内容没有显示在其中。看起来它是空的。我希望它作为其中 2 个 div 的背景。

提前感谢所有帮助。

标签： htmlcssresponsive-design

解决方案

由于您为每个 div 设置了 50% 的宽度，因此您的 div 比其他 div 低一个。由于您没有使用框大小，因此将您的填充添加到此，然后在此之上，然后添加边距，因此当考虑所有填充和边距时，您的 div 的宽度为 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 你真的应该使用样式表而不是内联样式，因为它更易于维护，并且可以通过可重用的类减少你的臃肿

推荐阅读