Question

我已经完成了所有其他有关此事的问题，但他们都没有帮助。我的段落周围有边框，边框是通过我的图像而我的文字没有。我如何让我的边界不要为我搞砸一切？我的代码：

<div>
   <img src="#"> <h3 class=bio> text text text text </h3>
</div>

的CSS

.bio {
  position: relative;
  text-align: left;
  font-size: 16px;
  border: 10px solid #f7b733;
  padding: 4px;
  margin: 30px auto 30px auto;
  display: inline-block;
}
img {
  float: left;
  position: fixed, left;
  border: 8px solid #fc4a1a;

Answer 1

您可以使用2件事来完成此任务。

1使用display:inline-block将它们并排排列。


使用vertical-align:middle垂直对齐w.r.t.

以下是一个工作片段。

＆＃13;

.bio {
  position: relative;
  text-align: left;
  font-size: 16px;
  border: 10px solid #f7b733;
  padding: 4px;

  display: inline-block;vertical-align:middle;
}

img {
  display: inline-block;
  border: 8px solid #fc4a1a; vertical-align:middle;}

＆＃13;

<div>
  <img src="#">
  <h3 class=bio> text text text text </h3>
</div>

＆＃13;

Answer 2

你也可以使用更简单的方法使用flexbox，就像这样

＆＃13;

.flex{
  display: flex;
}
.bio {
  font-size: 16px;
  border: 10px solid #f7b733;
}

＆＃13;

<div class="flex">
  <img src="http://lorempixel.com/100/100/" >
  <h3 class="bio"> text text text text text text </h3>
</div>

＆＃13;

Answer 3

喜欢这个？使用display:inline

  .bio {
  position: relative;
  text-align: left;
  font-size: 16px;
  border: 10px solid #f7b733;
  padding: 4px;
  margin: 30px auto 30px auto;
  display: inline;
}

img {
  display: inline;
  border: 8px solid #fc4a1a;

<div>
  <img src="#">
  <h3 class=bio> text text text text </h3>
</div>

Answer 4

如果你试图保持图像和段落水平..然后在父div上使用flex ..你可以通过这种方式摆脱很多样式..还有更多的选项来调整你的孩子..你可以在此处查找有关flex的更多信息：flex

请参阅此小提琴Fiddle

＆＃13;

 .parent {
    display:flex;
    align-items:center;
   }

.bio {
  font-size: 16px;
  border: 10px solid #f7b733;
  padding: 4px;
  display: inline-block;
  margin:10px;
}
img {
  border: 8px solid #fc4a1a;
  }

＆＃13;

<div class="parent">
<img src="#"> <h3 class=bio> text text text text  text text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext</h3>
</div>

＆＃13;

让Paragraph坐在我的图像旁边

4 个答案: