时间戳

首页 > 解决方案 > 添加边距时如何解决掉框问题

html - 添加边距时如何解决掉框问题

问题描述

我是 HTML 和 CSS 的新手。我有一个家庭作业。我必须像第一张图片一样创建一个响应式网站，而不使用任何 CSS 或 JavaScript 框架，如 Twitter Bootstrap。我应该只使用类、div、段落。不允许将宽度写入像素。

图片：响应式桌面

但是当我打开我写的网站时，我看到这样一个页面：

图片：无边距

当我添加一行“margin: 5px;” 在第 43 行的 style.css 中，我得到了这个：

图片：有边距

我意识到我还有另一个问题要解决。名为“Alt Başlık 7”的第 7 列太高了。如果有人也提供帮助，我将不胜感激。

我上传了我的代码，因为它们写在这里太长了。所以有谷歌驱动器链接

我需要至少 10 个但只有 1 个声誉，所以我链接了图像。对于那个很抱歉。

提前致谢。

标签： htmlcssresponsive-design

解决方案

我已经整理了一个使用填充来实现您想要的示例。我没有将边框样式添加到列中，而是将其添加到列内的 div 中。

下面的代码不允许您根据屏幕大小定义列数。这只是一个简单的示例，展示了您将如何实现目标。

了解网格布局的这种浮动方法很重要，但我也建议查看 Flexbox。

注意：点击代码下方蓝色的【运行代码片段】按钮后，点击【全屏】按钮即可查看响应性。 

* {
 box-sizing:border-box;
}
body {
  margin:0;
}
.row {
 padding-left:5px;
 padding-right:5px;
}
.col-inner {
 border:2px solid #000;
 padding:10px;
}
.col {
  float:left;
  padding-left:5px;
  padding-right:5px;
  margin-bottom:10px;
}
.col-12, .col-6 {
  width:100%;
}
@media (min-width: 767px) {
  .col-6 {
   width:50%;
  }
}
<div class="row">
 <div class="col col-6">
  <div class="col-inner">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tellus sem, eleifend sit amet finibus sit amet, laoreet ac nibh. Phasellus vulputate nisl finibus odio molestie laoreet. Donec ac efficitur elit. Donec blandit arcu mollis tincidunt luctus. Morbi sed lectus porta felis interdum tincidunt. Cras sed est turpis. Nunc sollicitudin porttitor euismod.</p>
  </div>
 </div>
 <div class="col col-6">
  <div class="col-inner">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tellus sem, eleifend sit amet finibus sit amet, laoreet ac nibh. Phasellus vulputate nisl finibus odio molestie laoreet. Donec ac efficitur elit. Donec blandit arcu mollis tincidunt luctus. Morbi sed lectus porta felis interdum tincidunt. Cras sed est turpis. Nunc sollicitudin porttitor euismod.</p>
  </div>
 </div>
 <div class="col col-6">
  <div class="col-inner">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tellus sem, eleifend sit amet finibus sit amet, laoreet ac nibh. Phasellus vulputate nisl finibus odio molestie laoreet. Donec ac efficitur elit. Donec blandit arcu mollis tincidunt luctus. Morbi sed lectus porta felis interdum tincidunt. Cras sed est turpis. Nunc sollicitudin porttitor euismod.</p>
  </div>
 </div>
 <div class="col col-6">
  <div class="col-inner">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tellus sem, eleifend sit amet finibus sit amet, laoreet ac nibh. Phasellus vulputate nisl finibus odio molestie laoreet. Donec ac efficitur elit. Donec blandit arcu mollis tincidunt luctus. Morbi sed lectus porta felis interdum tincidunt. Cras sed est turpis. Nunc sollicitudin porttitor euismod.</p>
  </div>
 </div>
 <div class="col col-12">
  <div class="col-inner">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tellus sem, eleifend sit amet finibus sit amet, laoreet ac nibh. Phasellus vulputate nisl finibus odio molestie laoreet. Donec ac efficitur elit. Donec blandit arcu mollis tincidunt luctus. Morbi sed lectus porta felis interdum tincidunt. Cras sed est turpis. Nunc sollicitudin porttitor euismod.</p>
  </div>
 </div>
</div>

推荐阅读