一些子元素不影响父级的高度 [英] Some child elements do not affect the parent's height
本文介绍了一些子元素不影响父级的高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在为我的大学建立一个设计，但遇到了这个特殊的问题：< div> 元素的高度不受其内部影响。
只需查看以下屏幕截图即可：
），但仍然有响应？
解决方案
为什么会这样说高度错误
这是因为你使用 float 对容器内的所有对象。浮动有点怪异，所以我建议阅读这些CSS-Tricks文章。
简而言之，当你浮动元素时，你将它从文档流中移出。当（非浮动）容器中的所有元素都浮动时，父级认为它没有任何子级，因此会崩溃。有几种方法可以解决此问题：
- 设置
overflow：hidden父容器（只有容器没有指定的高度才有效） - 立即向元素添加
clear：both在浮动元素之后，在父容器内部（这很好，但如果您为此目的添加元素，可能会添加额外的标记） - 利用
：after伪元素（这只适用于支持它的浏览器;好消息是大多数人都这样做，虽然可能需要polyfill）。
我应该如何做元素的布局，以使我的代码现代，愚蠢的简单（KISS），但响应？
从我在这里可以看到，你正在做一些事情，使你的工作比必要的更困难。在我看来，你缺少一些基本原理。
你可能想更多地看看语义标记。你正在经历我们在贸易中称为divitis。也就是说，您可以在< div> 中包装可能更适合其他元素的标签。
例如，您使用< div class =item> 的每个地方，都可以更改为无序列表（< ul> ; ），每个item是列表项（< li> ）。
此外，您不必使用按钮重新创建轮子。有一个输入类型=按钮和< button> 元素。使用其中任意一个将打开 form.submit 操作，然后可以挂钩（而不是重新创建它）。
你也不应该需要链接的CSS选择器是一半的选择器。了解 CSS和特异性如何工作，或者您将导致偏头痛在相对不久的将来。
我建议您选择 Dan Cederholm的手工制作的CSS 和防弹网页设计 ，以及详细了解 A List Apart 和 CSS-Tricks ，从根本上更好地掌握CSS和HTML。
I am building a design for my university but have come across this peculiar problem: the <div> element' height is not affected by its insides.
Just take a look at these screenshots:
Just to make some sense: I'm trying to build something complicated (for me) without using tables (only CSS - we are living in a modern web-epoch though =) ). Here's my goal:
I have some long and messy HTML and CSS code - I'm truly not a designer yet. Here it is:
HTML:
<html>
<head>
<title>verstka</title>
<link rel="stylesheet" type="text/css" href="verstka.css" media="all" />
</head>
<body>
<div class="top">
<div class="header angled-stripes">
<div class="logo"></div>
<div class="right-menu">
<div class="quick-links links">
<div class="item">
<a href="/">Home</a>
</div>
<div class="item">
<a href="/">Login</a>
</div>
<div class="item">
<span>Sitemap</span>
</div>
</div>
<div class="quick-search">
<form action="" method="get" onsubmit="javascript:void(0);">
<input type="text" name="q" size="20" />
<a href="/" onclick="return false;" class="button">search</a>
</form>
</div>
</div>
</div>
<div class="top-menu">
<div class="item">
<a href="/" class="products">Products</a>
</div>
<div class="item">
<a href="/" class="download">Download</a>
</div>
<div class="item">
<a href="/" class="support">Support</a>
</div>
<div class="item">
<a href="/" class="contacts">Contacts</a>
</div>
</div>
</div>
<div class="middle table-positioning">
<div class="row-positioning">
<div class="left-column">
<div class="content">
<div class="block product angled-stripes">
<div class="title">BASIC Package</div>
<div class="body">
<img src="product-green.png" />
<span>blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah</span>
<div class="links">
<a href="/" class="item">Details</a>
<a href="/" class="item">Download</a>
</div>
<a href="/" class="button">purchase now</a>
</div>
<div class="clearer"></div>
</div>
<div class="block product angled-stripes">
<div class="title">FULL Package</div>
<div class="body">
<span>lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</span>
<div class="links">
<a href="/" class="item">Details</a>
<a href="/" class="item">Download</a>
</div>
<a href="/" class="button">purchase now</a>
</div>
<div class="clearer"></div>
</div>
<div class="block plain">
<div class="title">Popular Products</div>
<ul class="green-arrow-markered">
<li>
<a href="/">Set True Image 9.0</a>
</li>
<li>
<a href="/">Standard Recorder 6.5</a>
</li>
<li>
<a href="/">Disk Director Upgrade 4.56</a>
</li>
<li>
<a href="/">ZippeNotes 6.22</a>
</li>
</ul>
</div>
</div>
<div class="footer">
©<span class="bolder">Software Company</span>
<div class="links">
<a href="/" class="item">Privacy Policy</a>
<a href="/" class="item">Terms of Use</a>
<div class="clearer"></div>
</div>
</div>
</div>
<div class="right-column">
<div class="content">
<div class="post">
<div class="title green-title">Company Address</div>
<div class="image"><img src="company-photo.jpg" alt="company photo"></div>
<div class="content"></div>
</div>
<div class="post left-post">
<div class="title">Contact Form</div>
<form action="#" onsubmit="javascript:void(0);">
<div class="input">
<label for="name">Your full name:</label>
<input id="name" name="name" type="text" />
</div>
<div class="input">
<label for="email">E-mail address:</label>
<input id="email" name="email" type="text" />
</div>
<div class="input">
<label for="phone">Your phone:</label>
<input id="phone" name="phone" type="text" />
</div>
<div class="input">
<label for="message">Your message</label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
</div>
<input type="submit" />
</form>
<div class="row">
<a href="#" class="button">reset</a>
<a href="#" class="button">submit</a>
</div>
</div>
<div class="highlighted-block post">
<div class="title green-title">
<img src="newsletter" alt="newsletter icon" />
<div>
<span class="uppercase">newsletter</span><br /><span class="sub-title">signup</span>
</div>
</div>
<div class="clearer"></div>
<form action="#" onsubmit="javascript:void(0);">
<label for="newsletter-name">Enter your name, please:</label>
<input id="newsletter-name" name="name" type="text" />
<label for="newsletter-email">Enter your e-mail, please:</label>
<input id="newsletter-email" name="email" type="text" />
<a href="#" class="button">subscribe now</a>
</form>
<div>
<strong>Note:</strong>
<span>lorem ipsum ololo!</span>
</div>
</div>
<div class="clearer"></div>
</div>
<div class="footer">
<div class="links">
<a href="#" class="item">Home</a>
<a href="#" class="item">Products</a>
<a href="#" class="item">Download</a>
<a href="#" class="item">Support</a>
<a href="#" class="item">Contacts</a>
<a href="#" class="item">Login</a>
<a href="#" class="item">Sitemap</a>
<div class="clearer"></div>
</div>
</div>
</div>
</div>
</div>
<div class="bottom">
</div>
</body>
</html>
CSS:
html, body {
margin: 0 0 80px 0;
padding: 0;
background-color: #313131;
color: #fff;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12px;
}
a, a:hover, a:visited {
color: #fff;
}
/*.links .item:nth-child(n+2):before {
content: '|';
}
*/
.links .item:nth-child(n+2) {
margin-left: 10px;
padding-left: 10px;
border-left: 1px solid #9C9C9C;
}
.links .item {
color: #9c9c9c;
float: left;
display: inline-block;
}
.links a.item:visited {
color: #9c9c9c;
}
.links a.item:hover {
color: #9c9c9c;
}
.bolder {
font-weight: bold;
}
.footer {
color: #9c9c9c;
}
.middle .left-column .content .block.product:nth-child(n+1) {
/*background: #8dc63f;*/
background-color: #86bc3c;
/*background-size: 25px 25px;*/
/*box-shadow: 1px 1px 8px #77ad32;*/
}
.middle .left-column .content .block.product:nth-child(n+2) {
/*background: #ee8911;*/
background-color: #ee8911;
/*background-size: 25px 25px;*/
/*box-shadow: 1px 1px 8px #eb7e0e;*/
}
.middle .left-column .content .block.product .title {
border-radius: 5px 5px 0 0;
padding-left: 20px;
text-shadow: 2px -1px 1px black;
min-height: 40px;
line-height: 40px;
vertical-align: middle;
}
.middle .left-column .content .block.product:nth-child(n+1) .title {
background: #6ce25d; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: -moz-linear-gradient(top, #6ce25d 16%, #4ebb30 36%, #bee884 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(16%,#6ce25d), color-stop(36%,#4ebb30), color-stop(100%,#bee884)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #6ce25d 16%,#4ebb30 36%,#bee884 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #6ce25d 16%,#4ebb30 36%,#bee884 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #6ce25d 16%,#4ebb30 36%,#bee884 100%); /* IE10+ */
background: linear-gradient(to bottom, #6ce25d 16%,#4ebb30 36%,#bee884 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6ce25d', endColorstr='#bee884',GradientType=0 ); /* IE6-8 */
}
.middle .left-column .content .block.product:nth-child(n+2) .title {
background: #db8a08; /* Old browsers */
background: -moz-linear-gradient(top, #db8a08 17%, #c76307 36%, #ef9366 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(17%,#db8a08), color-stop(36%,#c76307), color-stop(100%,#ef9366)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #db8a08 17%,#c76307 36%,#ef9366 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #db8a08 17%,#c76307 36%,#ef9366 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #db8a08 17%,#c76307 36%,#ef9366 100%); /* IE10+ */
background: linear-gradient(to bottom, #db8a08 17%,#c76307 36%,#ef9366 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#db8a08', endColorstr='#ef9366',GradientType=0 ); /* IE6-8 */
}
.middle .left-column .content .block .body .links .item:nth-child(n+2) {
border-left-color: #fff;
}
.middle .left-column .content .block .body .links .item {
color: #fff;
}
.middle .left-column .content .block.product .body img {
width: 30%;
float: left;
margin: 10px;
}
.middle .left-column {
width: 20%;
max-height: 350px;
}
.middle .right-column {
width: 65%;
}
.middle .right-column .content {
background-color: #fff;
border-radius: 5px;
border: 3px solid #1c1c1c;
}
.top .header .quick-links .item {
color: #fff;
}
.top .header {
font-size: 10pt;
}
.top .header .right-menu {
display: inline-block;
position: absolute;
right: 20px;
top: 20px;
}
.top .header .right-menu .quick-links {
display: block;
float: right;
margin: 20px 0;
}
.top .header .right-menu .quick-search {
display: block;
height: 20px;
line-height: 10px;
}
.top .header .right-menu .quick-search form {
margin-right: -10px;
}
.top .header .right-menu .quick-search form * {
display: inline-block;
float: left;
margin: 0 3px;
}
.button {
color: #fff !important;
text-transform: uppercase;
display: inline-block;
background-color: #a4dff2;
border: 1px solid #027499;
text-decoration: none;
font-family: Arial;
font-weight: bold;
text-shadow: #17688d;
font-size: 10pt !important;
text-align: center;
min-width: 70px;
max-height: 20px;
padding: 5px 5px;
border-radius: 3px;
text-shadow: 1px -1px 1px #000;
background: #69ace0; /* Old browsers */
background: -moz-linear-gradient(top, #69ace0 14%, #207cca 38%, #7db9e8 66%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(14%,#69ace0), color-stop(38%,#207cca), color-stop(66%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #69ace0 14%,#207cca 38%,#7db9e8 66%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #69ace0 14%,#207cca 38%,#7db9e8 66%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #69ace0 14%,#207cca 38%,#7db9e8 66%); /* IE10+ */
background: linear-gradient(to bottom, #69ace0 14%,#207cca 38%,#7db9e8 66%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#69ace0', endColorstr='#7db9e8',GradientType=0 ); /* IE6-8 */
}
.top {
height: 220px;
}
.top .header {
background-color: #09aad3;
/*background-size: 25px 25px;*/
box-shadow: 1px 1px 8px #0480a7;
height: 115px;
}
.top .header .logo {
width: 300px;
height: 50px;
margin: 20px 25px;
border-radius: 6px;
background-color: #027297;
position: absolute;
top: 0;
left: 0;
display: inline-block;
}
.top {
text-align: center;
}
.top .top-menu {
display: block;
height: 100px;
text-align: center;
}
.top .top-menu .item {
width: 190px;
height: 100px;
background-color: #363636;
display: inline-block;
margin: 0 -3px;
vertical-align: middle;
line-height: 50px;
/*font-family: Arial;*/
font-size: 14pt;
border: 1px solid #000;
border-radius: 4px;
}
.top .top-menu .item a {
text-decoration: none;
}
.middle .left-column .content .block .body {
margin: 10px;
}
.middle .left-column .content .block {
/*padding: 10px;*/
border-radius: 10px;
width: 225px;
max-width: 225px;
font-size: 12px;
margin: 7px;
border: 3px solid #1b1b1b;
}
.middle .left-column .content .block.plain {
background-color: #3f3f3f;
padding: 10px;
width: 205px;
}
.middle .left-column .content .block .title {
font-size: 16pt;
}
.middle .left-column .content .block.plain ul {
}
.middle .left-column .footer {
margin-left: 7px;
}
ul.green-arrow-markered {
list-style: disc outside url("list-bullet.gif");
padding-left: 15px;
}
.left-column {
padding-left: 5px;
}
.clearer {
clear: both;
}
.angled-stripes {
/*
background-color: #09aad3;
box-shadow: 1px 1px 8px #0480a7;
linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
*/
background-image: /* Safari 5 and earlier */
-webkit-gradient(linear, 100% 100%, 0 0,
color-stop(.25, rgba(255, 255, 255, 0.2)),
color-stop(.25, rgba(255, 255, 255, 0)),
color-stop(.5, rgba(255, 255, 255, 0)),
color-stop(.5, rgba(255, 255, 255, 0.2)),
color-stop(.75, rgba(255, 255, 255, 0.2)),
color-stop(.75, rgba(255, 255, 255, 0)),
color-stop(1, rgba(255, 255, 255, 0)));
background-image: /* Chrome and Webkit Nightly build */
-webkit-linear-gradient(45deg,
rgba(255, 255, 255, 0.2) 25%,
rgba(255, 255, 255, 0) 25%,
rgba(255, 255, 255, 0) 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
rgba(255, 255, 255, 0) 75%,
rgba(255, 255, 255, 0) 100%
);
background-image: /* Firefox */
-moz-linear-gradient(45deg,
rgba(255, 255, 255, 0.2) 25%,
rgba(255, 255, 255, 0) 25%,
rgba(255, 255, 255, 0) 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
rgba(255, 255, 255, 0) 75%,
rgba(255, 255, 255, 0) 100%
);
background-image: /* IE10 */
-ms-linear-gradient(45deg,
rgba(255, 255, 255, 0.2) 25%,
rgba(255, 255, 255, 0) 25%,
rgba(255, 255, 255, 0) 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
rgba(255, 255, 255, 0) 75%,
rgba(255, 255, 255, 0) 100%
);
background-image: /* opera 11+ */
-o-linear-gradient(45deg,
rgba(255, 255, 255, 0.2) 25%,
rgba(255, 255, 255, 0) 25%,
rgba(255, 255, 255, 0) 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
rgba(255, 255, 255, 0) 75%,
rgba(255, 255, 255, 0) 100%
);
background-image:
linear-gradient(45deg,
rgba(255, 255, 255, 0.2) 25%,
rgba(255, 255, 255, 0) 25%,
rgba(255, 255, 255, 0) 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
rgba(255, 255, 255, 0) 75%,
rgba(255, 255, 255, 0) 100%
);
background-size: 15px 15px;
-moz-background-size: 15px 15px;
-webkit-background-size: 15px 15px;
-o-background-size: 15px 15px;
-ms-background-size: 15px 15px;
}
input[type=submit], input[type=button] {
display: none;
}
.middle {
position: relative;
width: 100%;
margin: 0;
}
.middle .right-column {
color: #000;
width: 80%;
position: absolute;
top: 0;
}
.table-positioning {
display: table;
width: 100%;
}
.table-positioning .row-positioning {
display: table-row;
padding-left: 20px;
}
.table-positioning .row-positioning .cell-positioning {
display: table-cell;
}
.middle .left-column, .middle .right-column {
display: table-cell;
}
.middle .right-column .post .title {
font-size: 16pt;
color: #09aad3;
}
.green-title {
color: #4ebb30 !important;
}
.blue-title {
color: #09aad3 !important;
}
.uppercase {
text-transform: uppercase;
}
.middle .right-column .post .title {
padding: 10px 0;
margin: 10px;
border-bottom: 1px solid #bebebe;
}
.middle .right-column .post form input, .middle .right-column .post form label, .middle .right-column .post form textarea {
display: block;
width: 100%;
}
.middle .right-column .post form input[type=submit], .middle .right-column .post form input[type=button] {
display: none;
}
.middle .right-column .post .image {
display: inline-block;
border: 1px solid #bebebe;
border-radius: 4px;
padding: 3px;
}
.middle .right-column .post .image img {
border: none;
min-width: 124px;
min-height: 124px;
width: 124px;
height: 124px;
max-width: 124px;
max-height: 124px;
}
.middle .right-column .post .content {
margin: 10px;
border: none;
border-radius: 0;
border-bottom: 1px solid #bebebe;
}
.middle .right-column .post {
padding: 0 20px;
}
.split-content {
display: table;
}
.highlighted-block {
border: 1px solid #bebebe;
border-radius: 6px;
background-color: #eeeeee;
margin: 20px;
min-height: 420px;
width: 300px;
float: right;
display: inline-block;
}
.middle .right-column .left-post {
float: left;
display: inline-block;
width: 500px;
}
.middle .right-column .left-post .row {
clear: both;
display: inline-block;
float: right;
}
.highlighted-block img {
display: inline-block;
float: left;
}
.highlighted-block .title {
display: block;
height: 110px;
}
.highlighted-block .title div {
display: inline-block;
}
.highlighted-block .title img {
display: inline-block;
float: left;
width: 100px;
margin: 10px;
height: 100px;
}
.middle .right-column .post .button {
float: right;
margin-left: 10px;
}
.middle .right-column .cell-positioning.post {
margin: 20px;
}
.cell-positioning.wider {
width: 65%;
}
.middle .right-column .post .input {
display: block;
position: relative;
margin: 10px;
float: left;
clear: both;
width: 100%;
}
.middle .right-column .post .input * {
display: inline-block !important;
width: 50%;
}
.middle .right-column .post .input input, .middle .right-column .post .input textarea {
position: absolute;
right: 0;
}
.middle .right-column .footer .links {
float: right;
margin: 5px 10px;
}
As you can see, i have one block, .middle, containing the left part, left-column and the right part, .right-column.
The right column contains only one element - .content. But the elements of that container could be divided into several columns recursively (it contains two columns, one of which contains two columns, one of which contain two columns...).
So I tried to use the CSS3 display: table;, display: table-row; and display: table-column; properties. Somehow it helped me. A bit. I've tried to apply the same changes to my current problem but it doesn't seem to be working. So, I decided to try the <div> approach. The problem with this is that the <div>, containing the label and its input is not sizing by the maximum child' height (<textarea> is much larger than the <label>, but the container' height is as big as the label' one).
I have two questions based on this information:
Why does the "miscalculation of the height" happen and how do I prevent it?
How should I do the layout to get my code modern, stupidly simple (KISS) and yet responsive?
解决方案
why do things like that "miscalculation of the height" happen and how to prevent them?
That's because you're using float on all objects within the container. Floats are a little weird, so I recommend reading this CSS-Tricks article on them.
In short, though, when you float an element, you take it out of the document flow. When all elements in a (non-floated) container are floated, the parent thinks it doesn't have any children, and therefore collapses. There are a few ways you can fix this:
- Set
overflow: hiddenon the parent container (this only really works if the container does not have a specified height) - Add
clear: bothto an element immediately after the floated elements, inside the parent container (this works well, but may add extra markup if you add elements specifically for this purpose) - Harness the power of the
:afterpseudo-element (this only works for browsers that support it; the good news is that the majority do, albeit possibly requiring a polyfill).
how i should do the layout of the elements to get my code modern, stupidly simple (KISS) and yet responsive?
From what I can see here, you're doing a number of things that are making your work more difficult than is necessary. It seems to me that you're missing some fundamentals.
You might want to look more into semantic markup. You're experiencing what we in the trade call "divitis". That is, you're wrapping things in <div> tags that are probably better suited to other elements.
For example, every place that you use <div class="item">, you can change to an unordered list (<ul>) and each "item" is a list item (<li>). This saves you from attaching a class to absolutely everything.
Additionally, you don't have to reinvent the wheel with your button. There are both an input type=button and <button> element. Using either of these will open up the form.submit action that you can then hook into (instead of recreating it, too).
You also shouldn't need chains of CSS selectors that are half a dozen selectors long. Take a look at how CSS and specificity works, or you're going to cause yourself migraines in the relatively near future.
I recommend picking up Dan Cederholm's Handcrafted CSS and Bulletproof Web Design, as well as perusing A List Apart and CSS-Tricks, to get a better grasp on CSS and HTML at a fundamental level.
这篇关于一些子元素不影响父级的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
