CSS and display: inline-block
Question
I have a page that I'm having some difficulty with. It looks similar to the content below. The behavior I'd like (if it's possible) is for the .content div to remain to the right of the image. As the page shrinks horizontally, the text should resize itself, but STILL REMAIN TO THE RIGHT OF THE IMAGE.
I'm not using a float left because it's important for this that the the text doesn't merely wrap under the image; they should stay to their respective sides. I feel like this is an elementary CSS issue but I haven't had any luck trying to find a solution.
<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 answers
solution1
0 2014-10-13 16:09:12
Use 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*/
}
Full code
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>
solution2
0 2014-10-13 16:17:26
Try 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; 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.