Html CSS和显示：内联块
我有一个页面，我有点困难。它看起来与下面的内容类似。我希望的行为（如果可能的话）是将.content div保留在图像的右侧。当页面水平收缩时，文本应自行调整大小，但仍保持在图像右侧 我没有使用左浮动，因为重要的是，文本不只是环绕在图像下；他们应该站在各自的一边。我觉得这是一个基本的CSS问题，但我还没有找到解决方案Html CSS和显示：内联块,html,css,Html,Css,我有一个页面，我有点困难。它看起来与下面的内容类似。我希望的行为（如果可能的话）是将.content div保留在图像的右侧。当页面水平收缩时，文本应自行调整大小，但仍保持在图像右侧 我没有使用左浮动，因为重要的是，文本不只是环绕在图像下；他们应该站在各自的一边。我觉得这是一个基本的CSS问题，但我还没有找到解决方案 <html> <head> <style> <!-- body
<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>
这将是一个标题
最后，他坐在一个名叫毛里斯·廷西登（mauris tincidunt）和库拉比（Curabitur eget nisi lorem）的地方。佩伦茨克的精英阶层。莫里斯·卡维图拉·利奥，马莱苏阿达和埃尼·拉奥里特·瓦努特·特里斯蒂克。在sapien auctor的Morbi孕妇sem，quis pellentesque ante Dignessim。Present iaculis sem eget ex feugiat，nec luctus nunc tempus.将重点关注人类服务的社会影响
最小宽度.callout.news {
vertical-align: text-top;
box-shadow: 0px 0px 3px 2px rgba(167,167,167,.4);
padding: 10px;
min-width: 852px;/**add this*/
}
正文{
最大宽度：900px；
保证金：50美元；
}
.callout.news{
垂直对齐：文本顶部；
盒影：0px 0px 3px 2px rgba（167.4）；
填充：10px；
最小宽度：852px；/**添加此*/
}
.callout.news img，
.callout.news.content{
显示：内联块；
}
.callout.news img{
垂直对齐：顶部；
}
.callout.news.content{
最小宽度：200px；
最大宽度：600px；
}
这将是一个标题
最后，他坐在一个名叫毛里斯·廷西登（mauris tincidunt）和库拉比（Curabitur eget nisi lorem）的地方。佩伦茨克的精英阶层。莫里斯·卡维图拉·利奥，马莱苏阿达和埃尼·拉奥里特·瓦努特·特里斯蒂克。在sapien auctor的Morbi孕妇sem，quis pellentesque ante Dignessim。Present iaculis sem eget ex feugiat，nec luctus nunc tempus.将重点关注人类服务的社会影响
正文{
最大宽度：900px；
保证金：50美元；
}
.callout.news{
垂直对齐：文本顶部；
盒影：0px 0px 3px 2px rgba（167167167,167,4）；
填充：10px；
溢出：自动；
}
.新闻img，
.内容{
显示：内联块；
浮动：左；
}
.新闻img{
右边距：10px；
}
.callout.news.content{
最小宽度：200px；
}
这将是一个标题
最后，他坐在一个名叫毛里斯·廷西登（mauris tincidunt）和库拉比（Curabitur eget nisi lorem）的地方。佩伦茨克的精英阶层。莫里斯·卡维图拉·利奥，马莱苏阿达和埃尼·拉奥里特·瓦努特·特里斯蒂克。昆士兰州sapien auctor的Morbi孕妇扫描电镜
佩伦特式的前显贵。Present iaculis sem eget ex feugiat，nec luctus nunc tempus.将重点关注人类服务的社会影响