父div设为width:100%,其中一个子div要全部铺满，请问如何解决

Posted 2023-04-21

<style type="text/css">
.topnews border:1px solid #bdbdbd;background-color:#fff; width:100%;text-align:center;margin:12px 0px
.topnews dl dt border-right:1px #bdbdbd solid;border-bottom:1px #bdbdbd solid;border-left:1px solid #fff;float:left;height:30px;font-size:14px;line-height:32px
</style>

<div class="topnews">
<dl>
<dt style="width:120px">热点</dt>
<dt style="width:100px">来源</dt>
<dt style="width:auto">标题</dt>
<dt style="width:140px;float:right">更新时间</dt>
<dt style="width:100px;float:right">关注度</dt>
</dl>
</div>

标题这一项怎么能100%铺满？

要么你就用table（我挺纳闷有时候table能很容易解决的问题，干嘛非要用div呢。。 seo? 纠结这点事没用的。。。）
要么你可以全部宽度用百分比 加起来 100%
不然只能动用js了 参考技术A 如果你是想将标题这个div 做效果 比如背景图什么的 可以做到dl 中
非要做你的那个效果 你可以再单独做个层 z-index 到下面 不过感觉很麻烦追问

是啊，很麻烦，但实在又不想用表格，希望有朋友可出个好点子……

追答

position：relative； 看看这个属性 能行不 我感觉可能不行 你的100% 不好实现。。

根据 2 个子 <div> 设置父 <div> 的边框 [重复]

【中文标题】根据 2 个子 <div> 设置父 <div> 的边框 [重复]

【英文标题】：Set border of parent <div> depending on 2 child <div> [duplicate]

【发布时间】：2017-01-27 01:51:18

【问题描述】：

我想要一个带有 2 个子元素的 <div> 周围的边框。目前，绿色边框位于顶部，而不是 <div> 容器周围。你能告诉我如何解决这个问题吗？

在这里你可以看到我的代码：

.frame 
    border-style: solid;
    border-color: green;
    width: 500px;

.left 
    float: left;
    min-height: 20px;
    width: 200px;
    min-height: 20px;

.right 
    float: right;
    min-height: 20px;
    width: 300px;

.entry 
    height: 20px

<div class="frame">
    <div class="left">
        <div class="entry">
            key
        </div>
    </div>
    <div class="right">
        <div class="entry">
            value
        </div>
        <div class="entry">
            value
        </div>
        <div class="entry">
            value
        </div>
    </div>
</div>

【问题讨论】：

如果您不知道它是如何工作的，请不要使用浮点数。

从这里选择一个选项：***.com/questions/211383/…

@MarcosPérezGude 你如何建议创建一个平等的结构？

你有很多技术，inline-block、flexbox、table-cells 等等。但是使用浮动布局让你为该代码编写特定的 HTML+CSS，变得疯狂地改变它未来。

【参考方案1】：

你的.frame div 高度变为零，因为除了浮动的 div 子元素之外没有其他内容，这就是 CSS 的工作原理。将这部分代码添加到您的 .frame 类中

.frame
    overflow: hidden;

使用overflow: hidden; 会创建一个块格式化上下文。它会渲染块框，其中浮动块相互交互。

更多信息：Block formatting context

【讨论】：

著名的避免花旗骰的危险技巧。最好的解决方案是不要在布局中使用浮动，只使用它来浮动真正的浮动元素

但是，既然这解决了问题，我的赞成票是给你的:)

为了改进您的答案，您可以告诉 OP 为什么这是一个技巧而不是解决方案，以及为什么问题解决了。您将获得更多的赞成票；）

【参考方案2】：

问题是你的框架没有得到高度，因为所有的孩子都在漂浮。您可以通过将overflow: hidden; 添加到框架类来解决此问题。

【参考方案3】：

在子元素上使用float 时，不要忘记在父元素上设置布局。 有多种设置布局的方法。例如

.frame 
    overflow: hidden;

或者你可以使用:after伪元素：

.frame:after 
    content: '';
    display: block;
    clear: both;

.frame 
  border-style: solid;
  border-color: green;
  overflow: hidden;
  width: 500px;

.left 
  float: left;
  min-height: 20px;
  width: 200px;
  min-height: 20px;

.right 
  float: right;
  min-height: 20px;
  width: 300px;

.entry 
  height: 20px;

<div class="frame">
  <div class="left">
    <div class="entry">
      key
    </div>
  </div>
  <div class="right">
    <div class="entry">
      value
    </div>
    <div class="entry">
      value
    </div>
    <div class="entry">
      value
    </div>
  </div>
</div>