CSS和顯示：內聯塊
[英]CSS and display: inline-block
問題描述
我有一個遇到困難的頁面。 它看起來類似於下面的內容。 我想要的行為（如果可能）是.content div保留在圖像的右側。 當頁面水平縮小時，文本應自行調整大小，但仍保留在圖像的右側。
我沒有使用浮點數，因為對於這一點而言，重要的是文本不僅要包裹在圖像下面； 他們應該留在各自的一邊。 我覺得這是一個基本的CSS問題，但是我沒有運氣試圖找到解決方案。
<html>
<head>
<style>
<!--
body {
max-width: 900px;
margin: 50 auto;
}
.callout.news {
vertical-align: text-top;
box-shadow: 0px 0px 3px 2px rgba(167,167,167,.4);
padding: 10px;
}
.callout.news img,
.callout.news .content {
display: inline-block;
}
.callout.news img {
vertical-align: top;
}
.callout.news .content {
min-width: 200px;
max-width: 600px;
}
-->
</style>
</head>
<body>
<div class="callout news">
<img src="http://goo.gl/4ayWDo" />
<div class="content">
<h3>This would be a Header</h3>
<p>Sed finibus semper ante, sit amet suscipit mauris tincidunt et. Curabitur eget nisi lorem. Pellentesque vel erat elit. Mauris vehicula leo leo, vel semper ante malesuada et. Aenean laoreet vulputate tristique. Morbi gravida sem at sapien auctor, quis pellentesque ante dignissim. Praesent iaculis sem eget ex feugiat, nec luctus nunc tempus.will focus on the societal impact of human services.</p>
</div>
</div>
</body>
</html>
2 個解決方案
解決方案1
0 2014-10-13 16:09:12
使用min-width
.callout.news {
vertical-align: text-top;
box-shadow: 0px 0px 3px 2px rgba(167,167,167,.4);
padding: 10px;
min-width: 852px;/**add this*/
}
完整代碼
body { max-width: 900px; margin: 50 auto; } .callout.news { vertical-align: text-top; box-shadow: 0px 0px 3px 2px rgba(167,167,167,.4); padding: 10px; min-width: 852px;/**add this*/ } .callout.news img, .callout.news .content { display: inline-block; } .callout.news img { vertical-align: top; } .callout.news .content { min-width: 200px; max-width: 600px; }
<div class="callout news"> <img src="http://goo.gl/4ayWDo" /> <div class="content"> <h3>This would be a Header</h3> <p>Sed finibus semper ante, sit amet suscipit mauris tincidunt et. Curabitur eget nisi lorem. Pellentesque vel erat elit. Mauris vehicula leo leo, vel semper ante malesuada et. Aenean laoreet vulputate tristique. Morbi gravida sem at sapien auctor, quis pellentesque ante dignissim. Praesent iaculis sem eget ex feugiat, nec luctus nunc tempus.will focus on the societal impact of human services.</p> </div> </div>
解決方案2
0 2014-10-13 16:17:26
嘗試這個
body { max-width: 900px; margin: 50 auto; } .callout.news { vertical-align: text-top; box-shadow: 0px 0px 3px 2px rgba(167, 167, 167, .4); padding: 10px; overflow: auto; } .news img, .content { display: inline-block; float: left; } .news img { margin-right: 10px; } .callout.news .content { min-width: 200px; }
<div class="callout news"> <div class="content"> <img src="http://goo.gl/4ayWDo" /> <h3>This would be a Header</h3> <p>Sed finibus semper ante, sit amet suscipit mauris tincidunt et. Curabitur eget nisi lorem. Pellentesque vel erat elit. Mauris vehicula leo leo, vel semper ante malesuada et. Aenean laoreet vulputate tristique. Morbi gravida sem at sapien auctor, quis pellentesque ante dignissim. Praesent iaculis sem eget ex feugiat, nec luctus nunc tempus.will focus on the societal impact of human services.</p> </div> </div>
JS.style.display = “inline” 將在 CSS 中顯示為“inline-block”
[英]JS .style.display = “inline” Will display as “inline-block” in CSS
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.