div之间的响应余量

时间：2018-11-29 10:46:40

标签： html css responsive-design

我想在2个div之间添加一个边距，但是出于某种原因，当我这样做时，第二个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的背景。

预先感谢所有帮助。

5 个答案:

答案 0 :(得分：1)

您为每个div设置了50％的宽度，因此您的div彼此之间是一个div。由于您没有使用过框大小，因此将填充添加到该尺寸上，然后再添加边距，这样，当考虑所有填充和边距时，div的宽度为100％+ 40px。

我将在容器上使用flex而不是浮动div，这将使div停留在同一行（即使它们太宽，它也会重新计算宽度以适合）。它还为您的子div带来了相同高度的额外奖励，并且您不必担心清理浮动信息（因此可以与父级解决此问题）。

下面，我从内联样式中删除了高度和浮点数，只添加了flex-框大小是可选的，我只想添加它，这样当您添加填充和设置宽度时，浏览器之间的行为就更加一致。 / p> 

* {
  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>

请注意，您确实应该使用样式表而不是内联样式，因为它更具可维护性，并且可以通过可重用的类来减少很多负担

答案 1 :(得分：0)

您需要从50％的margin和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>

答案 2 :(得分：0)

两个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像素скаждойстороны= 10px的，нуиещёдля余量 - получаемнадоотнять20像素 - вотипишемто，чтов宽度

这是在deepl.com上翻译的

  

通常，您需要从边距中减去50％的像素，边距为5px填充边= 10px，边距-我们需要减去20px-这就是我们写的宽度。< / p>

答案 3 :(得分：0)

您可以遵循以下模板，将两个容器（可以设置为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>

答案 4 :(得分：0)

正如人们所说的那样，问题出在元素上有50％的宽度，而在元素上有边距，这使得50％+ 50％+ 5px + 5px> 100％，无法在旁边显示它们彼此。

进行类似布局的一种更简单的方法可能是使用flexbox-layouts（例如https://css-tricks.com/snippets/css/a-guide-to-flexbox/），这对于使元素彼此之间具有动态装订线（布局网格中元素之间的空间）非常有用。

相关问题
最新问题