父div如何根据孩子的身高自动调整身高？
div#main{
width: 970px;
height: 100px;
background: rgba(255,0,0,1);
border: 5px solid rgb(251,151,117);
margin: 20px 0px 20px 0px; /* Top Right Bottom Left*/
padding: 10px
}
div#left{width: 383px;
height: 100%;
margin-right: 5px;
background: rgb(0,0,255);
float:left
}
div#description{width: 100%;
height: 50%;
background: rgb(0,0,0)
}
div#following{width: 100%;
height: 50%;
background: rgb(0,255,0)
}
div#posts{width: 577px;
height: auto;
margin-left: 5px;
background: rgb(255,255,0);
float: right
}<div id="main">
<div id="left" class="cell">
<div id="description" class="cell">
</div>
<div id="following" class="cell">
</div>
</div>
<div id="posts" class="cell">
there are some …这段代码有什么问题？
当我添加的div后面的背景消失float: left,以#text和#text2.但是当我删除它时float: left,一切看起来都很好.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
#first{
width: 200px;
background-color: #345752;
}
#left_b{
background:transparent url('img/left.png');
background-position: left top;
background-repeat: repeat-y;
min-height: 30px;
}
#right_b{
background:transparent url('img/right.png');
background-position: right top;
background-repeat: repeat-y;
}
#text{
float: left;
width: 50px;
height: 30px;
}
#text2{
float: left;
width: 70px;
height: 30px;
}
</style>
</head>
<body>
<div id = "first">
<div id = "left_b">
<div id = …我一直在使用flexbox进行布局,CSS浮动作为旧浏览器的后备.总的来说这很有效,因为理解的浏览器display: flex会忽略任何弹性项目上的浮动.
但是,我遇到这个问题的一个问题是使用clearfix.Clearfix是一种广泛使用的hack,它使用不可见的:after伪元素使容器正确清除/包含其中的任何浮动元素.但是,问题是这个伪元素被支持flexbox的浏览器视为弹性项目,这可能导致意外的布局问题.例如,如果您有两个弹性项目并使用justify-content: space-between,而不是位于弹性容器的开头和结尾,它们将出现在开头和中间,隐形的clearfix ::after伪元素占据结束位置.
我的问题是:有没有办法在不引起这些问题的情况下使用clearfix和flexbox布局？
我注意到当我检查使用bootstrap类生成的代码时,CSS中的属性往往会有很多:: after和:: before.下面是一个例子(来自w3schools网站).
有人可以广泛地解释一下这些额外属性的设计目标,以及为什么它们似乎出现在几乎所有元素上？
据我所知,他们将所有被排除的元素放入表格元素并添加一个空的文本空间.我假设这是为了布局目的,但我想更多地了解它的原因.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Grid</h1>
<p>This example demonstrates a 50%/50% split on small, medium and large devices. On extra small devices, it will stack (100% width).</p>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et …我有这个带有 的导航栏position: sticky，但是当它到达侧面导航的顶部和页面的内容时它会停止。我无法将 更改position为fixed，因为这样.ad上面的内容将不可见。我添加了属于侧面导航和内容的脚本。如何让我的导航栏继续运行，越过内容和侧边导航？
function sortBooks(upDown) {
var columns = document.getElementsByClassName("column")
function pricesToArray(columns) {
var prices = [];
for (var index = 0; index < columns.length; index++) {
var price = columns[index].querySelector('.price').innerText;
var priceInt = price.substr(1, price.length).replace(',', '.');
prices[index] = parseFloat(priceInt, 10);
}
return prices;
}
var prices = pricesToArray(columns);
function selectionSort(arr, upDown) {
var minIdx, temp,
len = arr.length;
for (var i = 0; i < len; i++) {
minIdx = …如果在容器元素中有浮动元素,则需要将容器设置为overflow auto或clear both在浮动元素之后添加.
这是有意义的,因为您正在清除容器中的浮动元素.
然而,当使用clearfixCSS技巧时,你正在容器之后做清除而不是浮动元素之后......我很困惑这是如何工作的,因为你现在正在清理容器而不是浮动因此它肯定仍然会导致容器有一个狡猾的身高吗？因为如果我把clear bothAFTER 放在带有物理元素的容器上它就不会起作用,那为什么它可以用:after？
有人能解释一下吗？谢谢
例:
<div style="border:#000 1px solid;padding:10px;">
<div style="width:100px;height:100px;background:blue;float:left;"></div>
</div>
<div style="clear:both;"></div>
这不起作用,但不是clearfix几乎可以做到的吗？
我需要一些帮助来构建灵活的html布局.我已经定义了页面的最小和最大宽度wrap.在里面wrap,我有两列,content和right.
我想要固定宽度right列.但是,我想使content宽度变得灵活,因此根据最小宽度和最大宽度,宽度应该增加或减少.
这是我的html结构:
<body>
<div class="wrap">
<div class="content">...</div>
<div class="right">...</div>
</div>
</body>
这是CSS,我正在尝试:
.wrap{
min-width: 780px;
max-width: 1140px;
margin: 10px auto;
}
.right{
float:left
width: 200px;
}
.content{
float: left;
width: ?? //what should i do here?
}
我会根据52framework.com提供的内容进行调整.(HTML5,CSS3,JS框架)尽管观看网格教程视频并检查其他演示源代码,但我无法理解为什么框架<div class="clear"></div><!-- clear -->在第12行使用代码.
以下代码的地址是:http://demo.52framework.com/demos/framework/grid.html
<body>
<div class="row">
<header>
<div class="logo col_7 col">52framework</div><!-- logo col_7 -->
<nav class="col_9 col">
<ul>
<li><a href="#navigation">navigation 1</a></li>
<li><a href="#navigation">navigation 2</a></li>
<li class="last"><a href="http://www.enavu.com">enavu network</a></li>
</ul>
</nav><!-- nav col_9 -->
<div class="clear"></div><!-- clear -->
</header>
</div><!-- row -->
...
下面的代码也来自同一个源代码,但是你看到<div class="clear"></div><!-- clear -->这里没有使用代码段,即使这里已经完成了更多的分区.
<!-- this section shows off the grid and how it can be used -->
<section class="row" id="grid">
<h2>Grid Framework</h2> …我在创建一个看起来像表格中的行的布局时遇到了问题,我需要它看起来像:
--------- ---------------------------
| | Line of text |
| | Line of text |
| | |
--------- ---------------------------
所以我正在尝试这样的事情:
<div>
<img src="" />
<div float=left>Line of text</div>
<div float=left>Line of text</div>
</div>
它不是正确的,它看起来像文本的行不占用全高,高达img的底部.我想为整行着色,我该怎么做？
谢谢
我在下面有下面的代码,但是如果我将rightnavdiv leftnav属性应用于它,为什么div元素出现在div元素下面会很困惑.我做错了什么或者我误解了浮子的使用？
码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTMl 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-language" content="en-us" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="copyright" content="© 2012" />
<title>DIV example</title>
<base href="" />
<link rel="stylesheet" href="" />
<style type="text/css">
* {
margin: 0px;
padding: 0px;
font-family: Arial, Verdana, sans-serif;
font-size: 100%;
}
#content {
width: 700px;
margin-top: 20px;
margin-right: auto;
margin-bottom: 0px;
margin-left: …css ×9
html ×7
clearfix ×2
css3 ×2
css-float ×1
flexbox ×1
grid-layout ×1
html5 ×1
javascript ×1
sticky ×1