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*/
}

完整代码

＆＃13;

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;
            }

＆＃13;

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

＆＃13;

Answer 2

试试这个

＆＃13;

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;
}

＆＃13;

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

＆＃13;

CSS和显示：内联块

2 个答案: