gpt4 book ai didi

html - CSS/HTML float div 继承父级的宽度而不响应定义的宽度,怎么了?

转载 作者:行者123 更新时间:2023-11-28 12:46:16 25 4
gpt4 key购买 nike

我是 HTML/CSS 的新手,如果我对这个问题感到难以置信,请原谅我。苦苦寻觅无果,终于认输问...

我在一个使用 float 的容器中并排放置了两个 div 框。那里没有问题(我希望)。我希望再次拆分右侧的 div 框。我以为这不会是一个问题,事实证明我错了。我只是无法让包含列表 (.includebox) 与它的合作伙伴 .helpbox2 中的排除列表 (.excludebox) 相邻

我已经剪切并粘贴了我认为相关的代码,但我可以随时添加更多代码。问题出现在 www.exceptionalcvs.co.uk/help_cv_basics.html 除非我再次处理它 - 我将尽我最大努力避免。

HTML

<body>
<div class="container">
<div class="margins">
<div class="helpbox1">
<h2>1. Introduction</h2>
</p><p>
<p>text here</p>
</div>
<div class="helpbox2">
<h2>2. What do I put in my CV&#63;</h2>
<p></p>
<div class="includebox">Include list
<ul>
<li></li>
<li></li>
</ul>
</div>
<div class="excludebox">Exclude list
<ul>
<li>Passport number</li>
<li>Driving license number</li>
<li>Social Security number</li>
<li></li>
<li>Martial status</li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</body>

CSS

.container{width:960px;margin:0 auto}
.margins{margin-left:16px;margin-right:16px}
.helpbox2{position:relative;top:0;left:0;width:396px;float:right;padding-right:12px;padding-left:12px;padding-bottom:10px;border-bottom:1px solid #999;border-left:2px solid #999;border-top:2px solid #999;border-right:1px solid #999;background:#efe7ca;margin-left:5px}

.incudebox{position:relative;left:0px;right:0px;width:100px;float:left;margin:0px auto;}
.excludebox{position:relative;left:0px;right:0px;vertical-align:top;width:100px;float:right;margin:0px}

如果代码有点乱,请见谅。问题图片在这里: http://www.exceptionalcvs.co.uk/img/div_problem.jpg

最佳答案

你错过了 .includebox 上的 l

编辑2

Here's the same code simplified ,以我会做的方式。

  • 删除不必要的.margins div
  • 重构您的 CSS,使第二个框中的所有 div 的样式都相同,唯一不同的是其中一个向右浮动
  • 将 CSS 规则分散到不同的行中,如果规则只有一个属性,则只在一行中放置
  • 删除 position:relativetopright - 同样,不必要的
  • 希望对您有所帮助:)

编辑你也不需要像你所拥有的那样多的样式,这些都可以因为它们什么都不做而消失(除非你有它们是因为我在你的例子中看不到的原因)

position:relative;left:0px;right:0px;;margin:0px auto;

还有

  • 尝试将每个 CSS 规则隔开一行,这样更容易阅读
  • 当您使用 Stack Overflow 时,人们确实经常使用 JSFiddle 来演示他们的问题。我用你的代码来帮助我,see here
  • 尝试用破折号分隔元素,但始终使用小写字母,例如.inside-box
  • 欢迎来到 Stack Overflow :)

关于html - CSS/HTML float div 继承父级的宽度而不响应定义的宽度,怎么了?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17339049/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com