我已經瞭解了關於此問題的所有其他問題，但他們都沒有幫助。我的段落有一個邊框，邊框穿過我的圖片，而我的文字沒有。 我該如何讓我的邊框不要把所有東西都給我擰？ 我的代碼：讓段落坐在我的圖片旁
<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>