【发布时间】：2014-11-17 09:19:48
【问题描述】：
我有 2 个问题，我想知道是否有人可以帮助我？我昨天和今天在互联网上四处寻找，找到了一些例子，但它们对我不起作用。 所以我想知道你们中的一些人是否知道如何解决这个问题。我对 HTML 和 CSS 也很陌生，所以也许这就是问题所在。 感谢您已经开始调查！
问题 1： 我使用“float”在左侧制作了 2 个 div，在右侧制作了另一个，顶部是 img，下面是一些文本。 但是现在，如果我再次在其下复制相同的内容，我的图像将被否决，并且我的文本不会出现。我也确实给了它一个 margin-bottom: 50px 但这也不起作用。
问题 2： 在我的 div box-text 中，我在 css 中给我一个 margin-top ，但文本不会下降。
这里是 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);
}
【问题讨论】：
-
嗨，欢迎来到 StackOverflow！您的问题看起来不错，描述了问题，有代码甚至是小提琴。第一个问题很好，但它可以在描述区域使用一些工作。
-
没人能帮我解决我的问题吗？