我有一个容器div里面包含6个子div。这些div需要按照客户需求进行特定的对齐方式。我已经使用客户网站的基本布局创建了一个示例,可以在此处发布。我有一个普通的CSS文件和一个移动端的CSS文件。在移动端视图下,这些Div将会按顺序1-6排列。在常规视图下,Div 1、3、4和5将被靠右对齐,Div 2和6将被靠左对齐。我需要Div 6紧贴Div 2底部,除了大约10px的空隙。使用我的当前代码,这些Div之间有很大的间隔,而且右侧的Div越多,Div 6就会被推得更低。所有这些Div都具有动态内容,它们的展示内容可能会增加或减少。如何让Div 6忽略右侧的Div,与Div 2紧密连接,而不会影响它们在移动端的压缩和显示?(您可以通过调整浏览器窗口大小来查看此代码的移动版本。)
以下是我的HTML和CSS:
以下是我的HTML和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>
展示2和6之间空格的例子图片: