问题让Div拥抱近在咫尺

Question

问题让Div拥抱近在咫尺

我在容器Div中有6个Div.这些div必须以某种方式对齐以满足客户的需求.我已经为我正在处理的客户网站采取了基本布局,并创建了一个样本,以便在此处发布.我有一个常规的CSS文件和一个移动CSS文件.在移动视图中,Div将按顺序1-6排列.在常规视图中,Divs 1,3,4和5将与右侧对齐.Div 2和6将对齐左侧.我需要div 6来拥抱div 2的底部,除了大约10px.根据我目前的代码,Div与他们之间存在巨大差距,并且6个被进一步推向页面,右侧Div有更多内容.所有这些Div都具有动态内容,可以使它们增加或减少显示内容的数量.如何让Div 6忽略右侧Div并拥抱Div 2而不搞砸这些如何缩小并出现在手机中？(您只需调整浏览器窗口的大小,即可使用此代码显示移动版本.)

这是我的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%;
}

Run Code Online (Sandbox Code Playgroud)

<!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>

Run Code Online (Sandbox Code Playgroud)

2到6之间的示例图像: 在此输入图像描述

Answer 1

Yan*_*era 5

浮动元素将在原来的位置向左或向右移动(这很重要#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;
}

Run Code Online (Sandbox Code Playgroud)

没有float他们将是一个低于另一个

在此输入图像描述

如果我们float: right的话div5,div6那就是它的位置div5,

/*the lines are just for illustrate*/

在此输入图像描述

所以,如果现在我们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;
}

Run Code Online (Sandbox Code Playgroud)

我们有这个

在此输入图像描述

如果我们设置clear: 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*/
}

Run Code Online (Sandbox Code Playgroud)

这将保持元素的正常行为float(浮动元素之后的元素将围绕它流动.).该display: inline-block是你的情况下维持margin的div2.

这是一个为您的案例工作的JSFIDDLE示例

我希望现在和未来有所帮助:)

归档时间：	11 年前
查看次数：	83 次
最近记录：	11 年前