全宽 div 由小描述文本 css 响应

Posted 2023-03-06

【中文标题】全宽 div 由小描述文本 css 响应

【英文标题】：full width div by small description text css responsive

【发布时间】：2014-05-28 10:02:36

【问题描述】：

我喜欢为我的文本 div 设置宽度：100%。但我不知道为什么这不起作用。

所以，如果我的描述文本很小，我的列表 div 没有全宽，如果我的描述文本很长，那么我有 100% 宽度的 div。

这是我的筛选问题：

DEMO SITE

这是我的 html：

<div class="columns events_list_even margin_padding_clean">
                            <div class="event_list_abstand">
                            <div class="two columns padding_right_left_clean">
                            <div class="date-list"><i class="fa fa-calendar fa-lg" style="margin-right: 10px"></i>Mo. 14.04.2014 </div>
                    <img src="http://www.davis-design.de/marktadresse/files/floh_troedel_jahrmarkt.png" class="category_icon">
                    <img src="http://www.davis-design.de/marktadresse/layout/images/veranstaltung_halbwegs_ueberdachung.png" class="roof">
                     </div>
                     <div class="ten columns margin_bottom_clean padding_right_left_clean">
                     <a href="/marktadresse/niedersachsen.html?veranstaltung=Abendmarkt+Osnabrueck%7E1X4JxCOwhDpD4Oj5ch%7E14.04.2014"><h2 class="date-ueberschrift" style="border-bottom: none;">Abendmarkt Osnabrueck</h2></a>
                     <div class="date-info"> Albrechtstraße 15 | 49076 Osnabrück |
                       Floh-, Trödel- &amp; Jahrmarkt</div>
                      <p class="margin_bottom_clean">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...</p></div></div></div>

【问题讨论】：

你能分享你的css吗

@fidelcastro 我发布了我的演示站点，您可以在 firebug 或谷歌开发者工具上对其进行测试。 CSS 代码太多了^^

好的，戴夫我找到了解决方案，你检查一下

【参考方案1】：

在你的班级中添加“width:100%”(event_list_abstand)。

【讨论】：

我更新了我的问题。希望你能更好地理解我的问题:)

如果我有长描述文本和小描述文本，我需要这种格式。

【参考方案2】：

根据您的 CSS，要仅定位白色和灰色框，请尝试：

.loop-posts .events_list_even
   width:100%;

【讨论】：

感谢您的回答。我更新我的问题。希望你能更好地理解我的问题:)

【参考方案3】：

columns 
    -moz-box-sizing: border-box;
    width: 100%;

在第 5 行的 responsive.css 中进行上述更改，以获得全宽的 div

【讨论】：

感谢您的回答。我更新我的问题。希望你能更好地理解我的问题:)

【参考方案4】：

将此添加到您的 css 中

div.columns.events_list_even.margin_padding_clean 
width: 100%;

【讨论】：

谢谢你的小费。但我需要这个：如果在宽度为 100%

的 div 中有小差异文本

blubblub