保持圖像和相鄰

Question

我有一個簡單的小提琴文本：https://jsfiddle.net/jzhang172/9nfb0gj3/

不使用Flexbox的，我希望能夠保持圖像尺寸的靜態和它旁邊的段落。現在，當重新調整大小時，該段落移動到下一行，我如何將它們始終保持在彼此的旁邊？

img{ 
 
    height:100px; 
 
    width:100px; 
 
    display:inline-block; 
 
    float:left; 
 
} 
 
p{ 
 
    float:left; 
 
    display:inline-block; 
 
    width:300px; 
 
}

<div class="box"> 
 
    <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" alt=""> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis placerat ex eros. Maecenas sit amet tellus vitae lacus facilisis varius pretium non sem. Ut non metus tincidunt, rhoncus dolor ut, suscipit arcu. Vestibulum dictum erat metus, nec euismod sem sagittis malesuada. Aenean tristique aliquet euismod. Nullam ultrices diam vel eros bibendum, in tincidunt felis fermentum. Nam vel finibus neque. Nunc ac ligula congue, porttitor arcu sit amet, molestie mi. In dignissim suscipit ligula, a sollicitudin metus lobortis ut. Duis mattis turpis eu purus ultricies, id efficitur enim aliquam.</p> 
 
</div>

Answer 1

你喜歡這款，你就box設置white-space: nowrap和你img和p刪除float: left。我還在img上添加了vertical-align: top以使其頂部對齊。

white-space: nowrap這樣做，告訴內聯元素不要斷線。

.box { 
 
    white-space: nowrap; 
 
} 
 
img{ 
 
    height:100px; 
 
    width:100px; 
 
    display:inline-block; 
 
    vertical-align: top; 
 
} 
 
p{ 
 
    white-space: normal; 
 
    display:inline-block; 
 
    width:300px; 
 
}

<div class="box"> 
 
    <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" alt=""> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis placerat ex eros. Maecenas sit amet tellus vitae lacus facilisis varius pretium non sem. Ut non metus tincidunt, rhoncus dolor ut, suscipit arcu. Vestibulum dictum erat metus, nec euismod sem sagittis malesuada. Aenean tristique aliquet euismod. Nullam ultrices diam vel eros bibendum, in tincidunt felis fermentum. Nam vel finibus neque. Nunc ac ligula congue, porttitor arcu sit amet, molestie mi. In dignissim suscipit ligula, a sollicitudin metus lobortis ut. Duis mattis turpis eu purus ultricies, id efficitur enim aliquam.</p> 
 
</div>

了2016變種會flex

.box { 
 
    display: flex; 
 
} 
 
img{ 
 
    height:100px; 
 
    width:100px; 
 
} 
 
p{ 
 
    width:300px; 
 
}

<div class="box"> 
 
    <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" alt=""> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis placerat ex eros. Maecenas sit amet tellus vitae lacus facilisis varius pretium non sem. Ut non metus tincidunt, rhoncus dolor ut, suscipit arcu. Vestibulum dictum erat metus, nec euismod sem sagittis malesuada. Aenean tristique aliquet euismod. Nullam ultrices diam vel eros bibendum, in tincidunt felis fermentum. Nam vel finibus neque. Nunc ac ligula congue, porttitor arcu sit amet, molestie mi. In dignissim suscipit ligula, a sollicitudin metus lobortis ut. Duis mattis turpis eu purus ultricies, id efficitur enim aliquam.</p> 
 
</div>

Answer 2

一個好的選擇是包裹IMG在一個容器中，並使用基於百分比寬度：

https://jsfiddle.net/5fs0s4n3/

.img-container{ 
    width: 30%; 
    float: left; 
} 
img{ 
    height:100px; 
    width:100px; 
} 
p{ 
    float:left; 
    display:inline-block; 
    width:70%; 
} 

Answer 3

你可以改變從inline-block顯示器table和table-cell實現這一目標。

.box { 
 
    display: table; 
 
    table-layout: fixed; 
 
} 
 
.box > * { 
 
    display: table-cell; 
 
} 
 
img { 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 
p { 
 
    width: 300px; 
 
}

<div class="box"> 
 
    <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" alt=""> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis placerat ex eros. Maecenas sit amet tellus vitae lacus facilisis varius pretium non sem. Ut non metus tincidunt, rhoncus dolor ut, suscipit arcu. Vestibulum dictum erat metus, nec euismod 
 
    sem sagittis malesuada. Aenean tristique aliquet euismod. Nullam ultrices diam vel eros bibendum, in tincidunt felis fermentum. Nam vel finibus neque. Nunc ac ligula congue, porttitor arcu sit amet, molestie mi. In dignissim suscipit ligula, a sollicitudin 
 
    metus lobortis ut. Duis mattis turpis eu purus ultricies, id efficitur enim aliquam.</p> 
 
</div>

Answer 4

與利潤率玩解決它：https://jsfiddle.net/oweahea8/1/

img{ 
    height:100px; 
    width:100px; 
    display:inline-block; 
    float:left; 
    margin-right: -100px; 
} 
p{ 
    float:left; 
    display:inline-block; 
    margin-left: 100px; 
}