问题让Div接近另一个 [英] Issue Getting Div to Hug up close to another
问题描述
我在容器中有6个div。这些div必须以一定的方式对齐客户的需求。我已经采取了我正在开发的客户网站的基本布局，并创建了一个示例在这里发布。我有一个常规的CSS文件和移动CSS文件。在移动视图中，Div会按照1-6的顺序排列。在常规视图中，Div 1，3，4和5将向右对齐。 Divs 2和6将与左对齐。我需要div 6拥抱div 2的底部，除了约10px。与我目前的代码，Divs之间有一个巨大的差距，6被推进更多的内容右侧Divs有更多的内容。所有这些Div都有动态内容，可以使它们增加或减少显示内容的数量。如何让Div 6忽略右侧Divs和拥抱Div 2，而不用拧紧这些冷凝和出现在手机？ （您可以调整浏览器窗口，让移动版本显示此代码。）
这是我的HTML和CSS：
<！DOCTYPE html& < html> < head> < title>示例HTML< / title> < meta charset =UTF-8> < meta name =viewportcontent =width = device-width，initial-scale = 1.0> < link href =exampleCSSMobile.cssmedia =（max-width：940px） =stylesheettype =text / css/> < link href =exampleCSS.cssmedia =（min-width：940px） =stylesheettype =text / css/> < / head> < body> < div id =containerDiv> < div id =div1>< p>测试1 Lorem Ipsum。< / p>< / div> < div id =div2>< p>测试2 Lorem Ipsum。朊ida ida。。。 Aenean solicitudin，lorem quis bibendum auctor，nisi elit consquat ipsum，nec sagittas sem nibh id elit。 Duis sed odio sit amet nibh vulputate cursus a sit neque。在orci enim中的suspendisse。 Lorem Ipsum。朊ida ida。。。 Aenean solicitudin，lorem quis bibendum auctor，nisi elit consquat ipsum，nec sagittas sem nibh id elit。 Duis sed odio sit amet nibh vulputate cursus a sit neque。在orci enim中的suspendisse。 Lorem Ipsum。朊ida ida。。。 Aenean solicitudin，lorem quis bibendum auctor，nisi elit consquat ipsum，nec sagittas sem nibh id elit。 Duis sed odio sit amet nibh vulputate cursus a sit neque。在orci enim中的suspendisse。 Lorem Ipsum。朊ida ida。。。 Aenean solicitudin，lorem quis bibendum auctor，nisi elit consquat ipsum，nec sagittas sem nibh id elit。 Duis sed odio sit amet nibh vulputate cursus a sit neque。在orci enim中暂停。< / p>< / div> < div id =div3>< p>测试3 Lorem Ipsum。朊ida ida。。。 Aenean solicitudin，lorem quis bibendum auctor，nisi elit consquat ipsum，nec sagittas sem nibh id elit。 < / p>< / div> < div id =div4>< p>测试4 Lorem Ipsum。朊ida ida。。。 Aenean solicitudin，lorem quis bibendum auctor，nisi elit consquat ipsum，nec sagittas sem nibh id elit。 Duis sed odio sit amet nibh vulputate cursus a sit neque。在orci enim中暂停。< / p>< / div> < div id =div5>< p>测试5 Lorem Ipsum。朊ida ida。。。 Aenean solicitudin，lorem quis bibendum auctor，nisi elit consquat ipsum，nec sagittas sem nibh id elit。 Duis sed odio sit amet nibh vulputate cursus a sit neque。在orci enim中暂停。< / p>< / div> < div id =div6>< p>测试6 Lorem Ipsum。朊ida ida。。。 Aenean solicitudin，lorem quis bibendum auctor，nisi elit consquat ipsum，nec sagittas sem nibh id elit。 Duis sed odio sit amet nibh vulputate cursus a sit neque。在orci enim中的suspendisse。 Lorem Ipsum。朊ida ida。。。 Aenean solicitudin，lorem quis bibendum auctor，nisi elit consquat ipsum，nec sagittas sem nibh id elit。 Duis sed odio sit amet nibh vulputate cursus a sit neque。在orci enim中的suspendisse。 Lorem Ipsum。朊ida ida。。。 Aenean solicitudin，lorem quis bibendum auctor，nisi elit consquat ipsum，nec sagittas sem nibh id elit。 Duis sed odio sit amet nibh vulputate cursus a sit neque。在orci enim中的suspendisse。 Lorem Ipsum。朊ida ida。。。 Aenean solicitudin，lorem quis bibendum auctor，nisi elit consquat ipsum，nec sagittas sem nibh id elit。 Duis sed odio sit amet nibh vulputate cursus a sit neque。在orci enim中的suspendisse。 Lorem Ipsum。朊ida ida。。。 Aenean solicitudin，lorem quis bibendum auctor，nisi elit consquat ipsum，nec sagittas sem nibh id elit。 Duis sed odio sit amet nibh vulputate cursus a sit neque。在orci enim中暂停。< / p>< / div> < / div> < / body>< / html>
示例中的空格在2到6之间：
浮动元素会向左或向右移动，因为它可以在原始位置重要＃1）。
以这种方式：
我们有2个div
< div class =div5> div5< / div>
< div class =div6> div6< / div>
.div-blue {
width：100px;
height：100px;
background：blue;
}
.div-red {
width：50px;
height：50px;
background：red;
}
没有 float
如果我们 float：right div5 ，当 div5 ，
$ b时，
div6 $ b / *这些行只是为了说明* /
所以如果现在我们 float： left div6 它会向左移动，在此行 1），因此如果 div5 改变它的行， div6 会跟在它后面。
现在，我们将其他div添加到方程式中。
< div class =div4> div4& ; / div>
< div class =div5> div5< / div>
< div class =div6> div6< / div>
.div-gree {
width：150px;
height：150px;
background：green;
float：right;
}
我们有这个
如果我们设置清除：right 到 div5 ，我们强制它采取下面的行 div4
所以你有原因。 这里的jsfiddle我在哪里编码
现在，如何修复
只需删除< div id =div6> ; 并设置 display：inline-block
＃div6 {
border：1px solid pink;
background-color：pink;
margin-bottom：10px;
width：65％;
/ * float：left; * / / * removed * /
display：inline-block; / * added * /
}
c $ c> float （浮动元素之后的元素将在其周围流动。）。 display：inline-block 是为了保持 margin div2 。
我希望这有助于现在和将来：）
I have 6 Divs within a container Div. These divs have to be aligned a certain way for a clients needs. I've taken the basic layout for the customer website I'm working on and created a sample to be posted here. I have a regular CSS file and a mobile CSS file. When in mobile view the Divs will be aligned in sequential order 1-6. When in the regular view, Divs 1, 3, 4, and 5 will be aligned to the right. Divs 2 and 6 will be aligned to the left. I need div 6 to hug the bottom of div 2 with the exception of about 10px. With my current code the Divs have a huge gap between them and 6 gets pushed further down the page with the more content the right side Divs have. All of these Divs have dynamic content that can make them increase or decrease in the amount of shown content. How can I get Div 6 to ignore the right side Divs and hug Div 2 without screwing up how these condense and appear in mobile? (You can just resize your browser window for the mobile version to appear with this code.)
Here is my HTML and CSS:
/*
exampleCSS.css
*/
#containerDiv {
width: 500px;
margin-left: auto;
margin-right: auto;
padding: 10px;
}
#div1 {
border: 1px solid red;
background-color: red;
margin-bottom: 10px;
width: 25%;
float: right;
}
#div2 {
border: 1px solid blue;
background-color: blue;
margin-bottom: 10px;
width: 65%;
float: left;
}
#div3 {
border: 1px solid green;
background-color: green;
margin-bottom: 10px;
width: 25%;
float: right;
}
#div4 {
border: 1px solid orange;
background-color: orange;
margin-bottom: 10px;
width: 25%;
float: right;
clear: right;
}
#div5 {
border: 1px solid purple;
background-color: purple;
margin-bottom: 10px;
width: 25%;
float: right;
clear: right;
}
#div6 {
border: 1px solid pink;
background-color: pink;
margin-bottom: 10px;
width: 65%;
float: left;
}
/*
exampleCSSMobile.css
*/
#containerDiv {
width: 100%;
}
#div1 {
border: 1px solid red;
background-color: red;
margin-bottom: 10px;
width: 100%;
}
#div2 {
border: 1px solid blue;
background-color: blue;
margin-bottom: 10px;
width: 100%;
}
#div3 {
border: 1px solid green;
background-color: green;
margin-bottom: 10px;
width: 100%;
}
#div4 {
border: 1px solid orange;
background-color: orange;
margin-bottom: 10px;
width: 100%;
}
#div5 {
border: 1px solid purple;
background-color: purple;
margin-bottom: 10px;
width: 100%;
}
#div6 {
border: 1px solid pink;
background-color: pink;
margin-bottom: 10px;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Example HTML</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="exampleCSSMobile.css" media="(max-width: 940px)" rel="stylesheet" type="text/css" />
<link href="exampleCSS.css" media="(min-width: 940px)" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="containerDiv">
<div id="div1"><p>Test 1 Lorem Ipsum.</p></div>
<div id="div2"><p>Test 2 Lorem Ipsum. Prion gravida nibh vel velit auctor
aliquet. Aenean solicitudin, lorem quis bibendum
auctor, nisi elit consquat ipsum, nec sagittas sem
nibh id elit. Duis sed odio sit amet nibh vulputate
cursus a sit neque. Suspendisse in orci enim. Lorem Ipsum. Prion gravida nibh vel velit auctor
aliquet. Aenean solicitudin, lorem quis bibendum
auctor, nisi elit consquat ipsum, nec sagittas sem
nibh id elit. Duis sed odio sit amet nibh vulputate
cursus a sit neque. Suspendisse in orci enim. Lorem Ipsum. Prion gravida nibh vel velit auctor
aliquet. Aenean solicitudin, lorem quis bibendum
auctor, nisi elit consquat ipsum, nec sagittas sem
nibh id elit. Duis sed odio sit amet nibh vulputate
cursus a sit neque. Suspendisse in orci enim. Lorem Ipsum. Prion gravida nibh vel velit auctor
aliquet. Aenean solicitudin, lorem quis bibendum
auctor, nisi elit consquat ipsum, nec sagittas sem
nibh id elit. Duis sed odio sit amet nibh vulputate
cursus a sit neque. Suspendisse in orci enim.</p></div>
<div id="div3"><p>Test 3 Lorem Ipsum. Prion gravida nibh vel velit auctor
aliquet. Aenean solicitudin, lorem quis bibendum
auctor, nisi elit consquat ipsum, nec sagittas sem
nibh id elit. </p></div>
<div id="div4"><p>Test 4 Lorem Ipsum. Prion gravida nibh vel velit auctor
aliquet. Aenean solicitudin, lorem quis bibendum
auctor, nisi elit consquat ipsum, nec sagittas sem
nibh id elit. Duis sed odio sit amet nibh vulputate
cursus a sit neque. Suspendisse in orci enim.</p></div>
<div id="div5"><p>Test 5 Lorem Ipsum. Prion gravida nibh vel velit auctor
aliquet. Aenean solicitudin, lorem quis bibendum
auctor, nisi elit consquat ipsum, nec sagittas sem
nibh id elit. Duis sed odio sit amet nibh vulputate
cursus a sit neque. Suspendisse in orci enim.</p></div>
<div id="div6"><p>Test 6 Lorem Ipsum. Prion gravida nibh vel velit auctor
aliquet. Aenean solicitudin, lorem quis bibendum
auctor, nisi elit consquat ipsum, nec sagittas sem
nibh id elit. Duis sed odio sit amet nibh vulputate
cursus a sit neque. Suspendisse in orci enim. Lorem Ipsum. Prion gravida nibh vel velit auctor
aliquet. Aenean solicitudin, lorem quis bibendum
auctor, nisi elit consquat ipsum, nec sagittas sem
nibh id elit. Duis sed odio sit amet nibh vulputate
cursus a sit neque. Suspendisse in orci enim. Lorem Ipsum. Prion gravida nibh vel velit auctor
aliquet. Aenean solicitudin, lorem quis bibendum
auctor, nisi elit consquat ipsum, nec sagittas sem
nibh id elit. Duis sed odio sit amet nibh vulputate
cursus a sit neque. Suspendisse in orci enim. Lorem Ipsum. Prion gravida nibh vel velit auctor
aliquet. Aenean solicitudin, lorem quis bibendum
auctor, nisi elit consquat ipsum, nec sagittas sem
nibh id elit. Duis sed odio sit amet nibh vulputate
cursus a sit neque. Suspendisse in orci enim. Lorem Ipsum. Prion gravida nibh vel velit auctor
aliquet. Aenean solicitudin, lorem quis bibendum
auctor, nisi elit consquat ipsum, nec sagittas sem
nibh id elit. Duis sed odio sit amet nibh vulputate
cursus a sit neque. Suspendisse in orci enim.</p></div>
</div>
</body>
</html>
Image of the example with the space between 2 and 6:
A floated element will move as far to the left or right as it can in the position where it was originally(this is important #1).
So put in this way:
We have 2 div
<div class="div5">div5</div>
<div class="div6">div6</div>
.div-blue{
width:100px;
height:100px;
background: blue;
}
.div-red{
width:50px;
height:50px;
background: red;
}
without float they'll be one below the other
If we float: right the div5, the div6 be positioned on the line when it was the div5,
/*the lines are just for illustrate*/
So if now we float: left the div6 it will move as far to the left as it can, "in this line" (see #1 above), so if div5 change its line, div6 will follow it.
Now let's add other div into the equation
<div class="div4">div4</div>
<div class="div5">div5</div>
<div class="div6">div6</div>
.div-gree{
width:150px;
height:150px;
background: green;
float:right;
}
We have this
If we set clear: right to the div5, we are force it to take the line bellow div4
So there you have why happens. Here the jsfiddle where I code this
NOW, HOW TO FIX IT
Just remove the float for the <div id="div6"> and set display: inline-block
like this:
#div6 {
border: 1px solid pink;
background-color: pink;
margin-bottom: 10px;
width: 65%;
/*float: left;*/ /*removed*/
display: inline-block; /*added*/
}
This will keep the normal behavior for elements without float (The elements after the floating element will flow around it.). The display: inline-block is for your case to maintain the margin of div2.
HERE A JSFIDDLE EXAMPLE WORKING FOR YOUR CASE
I hope this helps now and in the future :)
这篇关于问题让Div接近另一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
