在div和内容上强制最大宽度为100％

我试图在旁边显示一个工厂的信息，并且我想强制信息保持在工厂图像的正确位置，只要屏幕有一个具体的最小宽度。在div和内容上强制最大宽度为100％

问题是：如果信息包含的行长度超过父div中剩余宽度空间的100％的正常宽度，则信息div将显示在图像下方。

例具有良好的线路长度（不派息包装）：https://jsfiddle.net/o3sjug9q/
例子太多的线路长度（DIV裹住）：https://jsfiddle.net/seL72mt9/

如何强制细节div来包装他的文字，而不是包装本身到下一行？

<div class="outer"> 
<div class="slidecontainer row" id="biodivslider" data-id="1"> 
<div class="sliderbtn nowrap" onclick="bwdpic()">&lt;</div> 
<div class="wrap"> 
    <div class="detailimg"><img src="http://www.nachhaltiger-weinbau.net/wp-content/plugins/biodivslider/img/Milchsterne/Dolden-Milchstern_Ornithogalum_umbellatum-Tci_2004.jpg" class="detailimg"></div> 
    <div class="details"> 
    <p><span class="detailslabel">Name:</span><br>Milchsterne</p> 
    <p><span class="detailslabel">Lateinischer Name:</span><br>(Ornithogalum spec.), O. umbellatum, O. nutans</p> 
    <p><span class="detailslabel">Standort:</span><br>mäßig trocken, sandig, Wärmezeiger, mäßig stickstoffreich</p> 
    </div> 
</div> 
<div class="sliderbtn nowrap" onclick="fwdpic()">&gt;</div> 
</div> 

</div>

CSS：

div.outer { 
    width: 833px; 
    height: 491px; 
    background: lightblue; 
} 
div.slidecontainer { 
    max-height: 300px; 
} 

div.row { 
    display: table; 
    width: 100%; 
    table-layout: fixed; 
    border-spacing: 10px; 
    max-height: 300px; 
} 

div.row > div { 
    float: none; 
    display: table-cell; 
    height: 100%; 
    width: 100%; 
} 

div.row > div.wrap > div { 
    float: left; 
} 
# 
div.detailimg { 
    height: 300px; 
    width: 300px; 
} 

img.detailimg { 
    display: block; 
    max-height: 300px; 
    max-width: 300px; 
} 

div.details { 
    max-width: 100%; 
    vertical-align: middle; 
    word-wrap: break-word; 
    overflow: visible; 
} 

span.detailslabel { 
    font-size: smaller; 
    font-weight: bold; 
} 

div.details > p { 
    line-height: 90%; 
    word-wrap: break-word; 
    overflow: visible; 
} 

div.sliderbtn { 
    font-size: 50px; 
    font-weight: 900; 
    min-height: 300px; 
    height: 100%; 
    width: 60px !important; 
    line-height: 300px; 
    text-decoration: none; 
    vertical-align: middle; 
    text-align: center; 
    cursor: pointer; 
}

来源

2016-05-23 wullxz

你有一个形象如何应该看？ –

我的不好，你有！ –

所以你想在细节div在同一行比图片，对不对？ – Michael

https://jsfiddle.net/tjepuh1L/

1）从div.details擦除overflow: visible;和从div.details > p

2.）定义的div.details的最大宽度为calc(100% - 300px)

来源

2016-05-23 11:19:42 Johannes

W00T？ CSS有一些像calc（）？太好了！但我仍然认为使用％-value只需要 - 在这种情况下 - 在detailimg获得300px后留下的宽度的100％...我错了吗？ – wullxz

好吧，100％是父容器的100％，而不是剩下的东西... – Johannes

有趣！似乎直到现在，我的整个生活都是谎言......谢谢！ – wullxz

变化

div.details { 
max-width: 100%; 
vertical-align: middle; 
word-wrap: break-word; 
overflow: visible; 
}

到

div.details { 
max-width: 50%; 
vertical-align: middle; 
word-wrap: break-word; 
overflow: visible; 
}

如果您使用不同尺寸的图像变化最大宽度在CSS类图片的藏汉至50％

来源

2016-05-23 11:21:57 Michael

定义50％的最大宽度可能会一见钟情，但它会使细节div更小（应该填充剩余宽度）。 – wullxz

没错，但只要图像没有定义大小，就会导致CSS的完整重写。无论如何，50％都可以工作。 – Michael

在div和内容上强制最大宽度为100％

回答

相关问题