Question

我有2个问题，我想知道是否有人可以帮助我？昨天和今天我一直在互联网上寻找并找到一些例子，但它们并不适合我。所以我想知道你们中的一些人是否知道如何解决这个问题。我也不再使用HTML＆amp; CSS也许这就是问题所在。 感谢您已经对此进行了调查！

问题1：我在左侧制作了2个div，在右侧制作了另一个div＆＃34; float＆＃34;在顶部有img，在它下面有一些文本。但现在，如果我再次复制同样的东西，我的图像将被否决，我的文字将不会出现。我也确实给了它一个底部：50px，但也没有工作。

问题2：在我的div box-text 中，我在css中给出了一个margin-top，但文本不会下降。

Visit problem

这是HTML：

<body>
        <div id="content">
            <div class="head-text">My latest work</div>
                <div class="b1"> </div>
                <div class="b2"> </div>
                <div class="b3"><p><h3>Aangenaamklassiek</h3>
                    Hello fellers how are you doing? In todays project I made something funny ore just not because this is just some random text</p>
                </div>

            <div class="box-text">Text wont go down.</div>
                <div id="work">
                    <div class="box-left-img">
                        <div class="box-left-text">
                            Hello fellers how are you doing? In todays project I made something funny ore just not because this is just some random text</div>
                    </div>  
                    <div class="box-right-img">
                        <div class="box-right-text">
                            Hello fellers how are you doing? In todays project I made something funny ore just not because this is just some random text</div>
                    </div>


                    <div class="box-left-img">
                            <div class="box-left-text">
                                Hello fellers how are you doing? In todays project I made something funny ore just not because this is just some random text</div>
                    </div>  
                    <div class="box-right-img">
                        <div class="box-right-text">
                            Hello fellers how are you doing? In todays project I made something funny ore just not because this is just some random text</div>
                    </div>


                    <div class="box-left-img">
                        <div class="box-left-text">
                            Hello fellers how are you doing? In todays project I made something funny ore just not because this is just some random text</div>
                    </div>  
                    <div class="box-right-img">
                        <div class="box-right-text">
                            Hello fellers how are you doing? In todays project I made something funny ore just not because this is just some random text</div>
                    </div>



                </div>
        </div>
    </body>

这是我的css：

body {
    background-color: #efede7;
    line-height: 1.5;
}

#content{
    width: 962px;
    margin: 0 auto; 
}

.head-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    color: #000;
    font-size: 1.5em;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 50px 0 20px 0;
    text-align: center;
}

.b1 {
    background-image: url(http://larsdejonge.nl/portfolio/img/jot.jpg);
    height: 290px;
    width: 470px;
    float: left;
}

.b2 {
    background-image: url(http://larsdejonge.nl/portfolio/img/not.jpg);
    height: 600px;
    width: 470px;
    float: right;
}

.b3 {
    background-color: #fff;
    color: #6d6f6f;
    margin-top: 20px;
    height: 250px;
    width: 430px;
    padding: 20px;
    float: left;
    font-size: 1.0625em;
    font-family: 'ProximaNova', sans-serif;
    box-shadow: 1px 1px 1px rgba(0,0,0,.1);
}

h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    color: #545454;
    font-size: 1.25em;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.box-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    color: #000;
    font-size: 1.5em;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: 50px;
    text-align: center;
}

#work {
    width: 962px;
    margin: 0 auto;
}

.box-left-img {
    width: 470px;
    height: 290px;
    float: left;
    background-image: url(http://larsdejonge.nl/portfolio/img/dekroon.jpg);
    background-color: #fff;
}

    .box-left-text {
        width: 430px;
        height: 100px;
        color: #6d6f6f;
        background-color: #fff;
        margin-top: 290px;
        margin-bottom: 50px;
        padding: 20px;
        float: left;
        font-size: 1.0625em;
        font-family: 'Montserrat', sans-serif;
        box-shadow: 1px 1px 1px rgba(0,0,0,.1);
    }

.box-right-img {
    width: 470px;
    height: 290px;
    float: right;
    background-image: url(http://larsdejonge.nl/portfolio/img/fcu.jpg);
    background-color: #fff;
}

    .box-right-text {
        width: 430px;
        height: 100px;
        color: #6d6f6f;
        background-color: #fff;
        margin-top: 290px;
        margin-bottom: 50px;
        padding: 20px;
        float: left;
        font-size: 1.0625em;
        font-family: 'Montserrat', sans-serif;
        box-shadow: 1px 1px 1px rgba(0,0,0,.1);
    }

Answer 1

您的问题并未在所有浏览器中显示，（Chrome处理一切都很好）

这是因为IE在确定浮动元素的高度时非常糟糕。要解决此问题，只需使用overflow:auto

将float元素部分封装在另一个div中

      <div class="content_box">
         <div class="head-text">My latest work</div>
         <div class="b1"> </div>
         <div class="b2"> </div>
         <div class="b3"><p><h3>Aangenaamklassiek</h3>
                Hello fellers how are you doing? In todays project I made something funny ore just not because this is just some random text</p>
         </div>
      </div>

CSS：

    .content_box
    {
         overflow:auto;
    }

请参阅this jsFiddle

Answer 2

我看到你没有找到解决方案。也许你已经解决了这个问题，但是我仍然想帮助你，因为我认为你的第一个问题的解决方案可能是：

这是我用过的HTML，如果你愿意，可以改变它。

<body>
    <div id="content">
        <div class="head-text">My latest work</div>
            <div class="b1"> </div>
            <div class="b2"> </div>
            <div class="b3"><p><h3>Aangenaamklassiek</h3>
                Hello fellers how are you doing? In todays project I made something funny ore just not because this is just some random text</p>
            </div>
    </div>

    <div id="container">
        <div class="head-text">Text wont go down.</div>
            <div id="box-left-img"></div>
            <div id="box-right-img"></div>
            <div id="box-left">
                <div id="text">
                    Hello fellers how are you doing? In todays project I made something funny ore just not because this is just some random text
                </div>
            </div>
            <div id="box-right">
                <div id="text">
                    Hello fellers how are you doing? In todays project I made something funny ore just not because this is just some random text
                </div>
            </div>

            <div id="box-left-img"></div>
            <div id="box-right-img"></div>
            <div id="box-left">
                <div id="text">
                    Hello fellers how are you doing? In todays project I made something funny ore just not because this is just some random text
                </div>
            </div>
            <div id="box-right">
                <div id="text">
                    Hello fellers how are you doing? In todays project I made something funny ore just not because this is just some random text
                </div>
            </div>  
    </div>
</body>

这是我用过的CSS，如果你愿意，也可以改变它。

body {
    background-color: #efede7;
    line-height: 1.5;
}

#content{
    width: 962px;
    margin: 0 auto; 
}

.head-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    color: #000;
    font-size: 1.5em;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 50px 0 20px 0;
    text-align: center;
}

.b1 {
    background-image: url(http://larsdejonge.nl/portfolio/img/jot.jpg);
    height: 290px;
    width: 470px;
    float: left;
}

.b2 {
    background-image: url(http://larsdejonge.nl/portfolio/img/not.jpg);
    height: 600px;
    width: 470px;
    float: right;
}

.b3 {
    background-color: #fff;
    color: #6d6f6f;
    margin-top: 20px;
    height: 250px;
    width: 430px;
    padding: 20px;
    float: left;
    font-size: 1.0625em;
    font-family: 'ProximaNova', sans-serif;
    box-shadow: 1px 1px 1px rgba(0,0,0,.1);
}

h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    color: #545454;
    font-size: 1.25em;
    letter-spacing: .05em;
    text-transform: uppercase;
}

#container {
    margin: 0 auto;
    width: 960px;
}
#box-left-img {
    width: 470px;
    background: url(http://larsdejonge.nl/portfolio/img/dekroon.jpg) no-repeat;
    float: left;
    height: 290px;
    box-shadow: 1px 1px 1px rgba(0,0,0,.1);

}
#box-right-img {
    width: 470px;
    float: right;
    background: url(http://larsdejonge.nl/portfolio/img/fcu.jpg) no-repeat;
    height: 290px;
    box-shadow: 1px 1px 1px rgba(0,0,0,.1);
}
#box-left {
    width: 470px;
    float: left;
}

#box-right {
    float: right;
    width: 470px;
}

#text {
    background-color: fuchsia;
    margin-bottom: 20px;
    color: #6d6f6f;
    padding: 20px;
    background-color: #fff;
    font-size: 1.0625em;
    font-family: 'ProximaNova', sans-serif;
    box-shadow: 1px 1px 1px rgba(0,0,0,.1);
    width: 430px;
}

问题2无法修复，也许您需要在另一个问题中提出问题？！

电贺， FlatDesigners

使用浮动时消失的div和奇怪的定位

2 个答案: