我已经了解了关于此问题的所有其他问题，但他们都没有帮助。我的段落有一个边框，边框穿过我的图片，而我的文字没有。 我该如何让我的边框不要把所有东西都给我拧？ 我的代码：让段落坐在我的图片旁
<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;
喜欢这个？使用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>，如果你想保留的图像和段落horizontally..then父div..you可以摆脱许多风格这个way..and有使用柔性更多的选择来调整你的孩子too..You可以找到更多有关弹性这里：flex
请参阅本小提琴Fiddle
.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;
}<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>你可以用两两件事来完成这件事。
1使用
display:inline-block将它们并排排列。
- 使用
vertical-align:middle将垂直中心w.r.t彼此对齐。
下面是一个工作片段。
.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;}<div>
<img src="#">
<h3 class=bio> text text text text </h3>
</div>你也可以使用Flexbox的使用更简单的方法，这样
.flex{
display: flex;
}
.bio {
font-size: 16px;
border: 10px solid #f7b733;
}<div class="flex">
<img src="http://lorempixel.com/100/100/" >
<h3 class="bio"> text text text text text text </h3>
</div>