Question

我一直试图制作一个好看的div（只是一个正常的div，就像网站的内容一样）

它看起来类似于典型的＆＃34;新闻＆＃34;链接。宽度为80％。图像应该在左侧有一个边框，一个关于当前新闻的标题，一个段落以其余部分的链接结束，然后使用hr标签完成它并重新开始下一个新闻..

所以第一个问题是我不能使用边距或填充来让文本远离图像的边框。无论我多么努力，标题和段落都会准确地从图像边框结束的位置开始。第二个问题是当我使用hr标签时，它会从段落结束的地方开始..

第三个问题是当我使用display inline-block标签时，自动保证金不再起作用，它全部浮动到左边。

这是我的代码：

＆＃13;

div.content1 {
  width: 80%;
  color: white;
  background: #2B2B2B;
  margin-top: 25px;
  box-shadow: 0px 0px 10px 5px #3A3A3A;
  height: auto;
  display: inline-block;
  padding: 15px;
  margin-bottom: 25px;
}

div.content1>img {
  float: left;
  max-height: 100%;
  border: 1px solid black;
  width: 400px;
  height: 200px;
}

.content1>p {
  padding: 15px;
}

＆＃13;

<div class="content1">
  <img src="Twitter.png">
  <h1> Welcome! </h1>
  <p>Long followed text... Long followed text... Long followed text... Long followed text... Long followed text... Long followed text... Long followed text... Long followed text... Long followed text... Long followed text... Long followed text... </p>
  <hr>
  <h1> Welcome! </h1>
  <p>Long followed text... Long followed text... Long followed text... Long followed text... Long followed text... Long followed text... Long followed text... Long followed text... Long followed text... Long followed text... Long followed text... </p>
</div>

＆＃13;

Answer 1

添加margin-right可以解决您的第一个问题。对于问题2，您需要清除已分配给img标记的浮动。显然，您需要摆脱display:inline-block以使margin:auto工作。试试这段代码。

<div class="content1">
  <img src="Twitter.png">
  <h1> Welcome! </h1>
  <p>Long followed text... Long followed text... Long followed text... Long followed text... Long followed text... Long followed text... Long followed text... Long followed text... Long followed text... Long followed text... Long followed text... </p>
  <div class="clear"></div>
  <hr>
  <h1> Welcome! </h1>
  <p>Long followed text... Long followed text... Long followed text... Long followed text... Long followed text... Long followed text... Long followed text... Long followed text... Long followed text... Long followed text... Long followed text... </p>
</div>

div.content1 {
  width: 80%;
  color: white;
  background: #2B2B2B;
  margin-top: 25px;
  box-shadow: 0px 0px 10px 5px #3A3A3A;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  padding: 15px;
  margin-bottom: 25px;
}

div.content1>img {
  float: left;
  max-height: 100%;
  border: 1px solid black;
  width: 400px;
  height: 200px;
  margin-right: 20px;
  margin-bottom: 20px;
}

.content1>p {}

.clear {
  clear: both;
}

Divs不会对我的填充/边距做出反应

1 个答案: