时间戳

首页 > 解决方案 > 如何创建在调整网页大小时保持的列间隙？

html - 如何创建在调整网页大小时保持的列间隙？

问题描述

我的网站目前

[this is my HTML:][2]

<div class="column-box" style="width: 100%"></div>

<div id="column1" style="float:left; margin:15; width:33%;">

 <p>ALEX BURGER<br>
I am a Graphic Designer and Photographer with a strong focus on typography and editorial design.
    </p>   
</div>

<div id="column2" style="float:left; margin:15;width:33%;">
  <p>EDUCATION<br>

ETC..

我尝试在 css 中添加边距和填充，但没有做任何事情

.column1 {
padding: 50px !important;
}

是否有一种完全不同的方法可以更好地获得相同的效果？我希望每列中的文本留在各自的列中

任何帮助将非常感激

标签： htmlcss

解决方案

您的“column1”是一个 id 而不是 css 类，因此它应该在 css 中像这样表示： #column1

如果你想使用一个类，你需要在class="column"你的 divs 中添加类似的东西，然后将 css 添加到.column

您的内联样式不适用于边距，因为您只是放置15而不是15px

.column {
  float: left;
  width: 33.33%;
  padding: 30px;
  box-sizing: border-box;
}
<div class="container">
  <div class="column">col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 </div>
  <div class="column">col2</div>
  <div class="column">col3</div>
</div>

使用flexbox或网格也是选项。

推荐阅读