CSS和显示：内联块

Question

我有一个遇到困难的页面。 它看起来类似于下面的内容。 我想要的行为（如果可能）是.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>

Answer 1

使用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>

Answer 2

尝试这个

 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>

CSS和显示：内联块

问题描述

2 个解决方案

解决方案1
0 2014-10-13 16:09:12

解决方案2
0 2014-10-13 16:17:26

CSS和显示：内联块

问题描述

2 个解决方案

解决方案1 0 2014-10-13 16:09:12

解决方案2 0 2014-10-13 16:17:26

解决方案1
0 2014-10-13 16:09:12

解决方案2
0 2014-10-13 16:17:26