Question

我已经创建了一个关于我的问题的演示，我试图在图像旁边强制显示文本，但是当你缩小浏览器窗口时会将其缩小到图像下方。

我需要一个更好的方法。

.avatar_ad_bg_desktop{
    width: 100px;
    height: 100px;
    background-image: url('http://blogs.terrapinn.com/total-real-estate/files/2012/04/SAV_CMYK_LogocopyEng.jpg');
    background-repeat: no-repeat;
    background-size:cover;
    float:left;
}

            <div style="background: red; height: auto; overflow:auto;">

                <div style="background: green;">title</div>
                <div style="background: blue;">Web address</div>

                <div style="float:left;">
                <div class="avatar_ad_bg_desktop">
                </div>

                <div style="float: left;  margin: 0 0px 0 10px; vertical-align:top; word-break: break-all;">Savills plc is a global real estate services provider listed on the London Stock Exchange</div>
            </div>


            </div>

Answer 1

不是使用文字在div上设置float:left，而是将其设置为overflow:auto（或隐藏）

<强> FIDDLE

现在调整浏览器窗口的大小，看到文本填满剩余的宽度

Answer 2

您可以使用table和table-cell格式获得更好的结果。像下面一样更新您的HTML。

   <div style="background: red; height: auto; overflow:auto;">

   <div style="background: green;">title</div>
    <div style="background: blue;">Web address</div>

       <div style="display: table;">
          <div class="avatar_ad_bg_desktop">
          </div>

          <div style="display: table-cell;  margin: 0 0px 0 10px; vertical-align:top; word-break: break-all;">Savills plc is a global real estate services provider listed on the London Stock Exchange</div>
          </div>
       </div>                    
   </div>

DEMO

Answer 3

您可以使用CSS的display:table / table-line / table-cell属性并删除float:left声明。您使用display:table;设置容器然后你可以为每个必须保持在同一行的单元格display:table-cell;。

这是一个更新的小提琴 http://jsfiddle.net/88anzh58/4/

将内容拟合到div中而不会降低

3 个答案: