浮动css元素的问题

问题描述：

我有我的代码的一些基本问题，我试图让一个标题和一个段落显示在一个div内的图像的左侧。它的工作原理完全正常时，我有一个标题，但只要我在一段扔东西它使图像进一步向下，并显示它上面的一段话：浮动css元素的问题

这是我希望它看起来像

gyazo.com/0596041414dc7229abc6640659e3d0a0

这里是什么样子：

gyazo.com/b099a4ccb7b3e973de2d7d54a5b050ad

这里是我的代码：

<div class="box3"> 
    <h2 class="minecrafter" style="float:left;padding-left:15px;padding-top:10px;letter-spacing:3px;">Apply Now</h2> 
    <p class="minecrafter" style="float:left;padding-left:15px;letter-spacing:1px;padding-top:5px;font-size:13px;">Lorem ipsum dolor sit amet, mel id fabulas dolorum, lorem vulputate ei his. </p> 
    <img src="images/applyheretoday.png" style="height:90%;float:right;margin-top:13px;margin-right:10px"> 
</div> 

.box3 { 
    margin-top:3px; 
    margin-left:5%; 
    float:left; 
    width:65%; 
    background:#707070; 
    height:300px; 
} 

.minecrafter { 
    font-family:minecrafter; 
    color:#FFFFFF; 
}

你需要一个明确的，你要列崩溃。另外考虑将内联CSS移入样式中。 – ajmajmajma

答

在添加图像清晰，像这样

<div class="clear"></div>

和风格为它

.clear { 
    clear:both; 
}

您可能需要重新格式化您的HTML一点点地得到你想要的效果：

<div class="box3"> 
    <div id="box3left"> 
     <h2 class="minecrafter">Apply Now</h2> 
     <p class="minecrafter" >Lorem ipsum dolor sit amet, mel id fabulas dolorum, lorem vulputate ei his. </p> 
    </div> 
    <img src="images/applyheretoday.png"> 
</div>

及附带的css

.box3 #box3left { 
    display: block; 
    float:left; 
    width: 40%; 
} 

.box3 img { 
display: block; 
float: left; 
width: 60% 
    }

你应该根据你想要的尺寸调整宽度，并添加你需要的任何填充/边距。如果可以，尽量避免内联样式。

不工作，它会工作，如果我只是将该类添加到现有的权利？ –

@TobiasYeomans应用你的代码逻辑，应该没问题。由于浮动列已经崩溃，所以我将所有的文本都放在1格中，然后漂浮在左边，并且脱掉了他们的内联样式。如果您需要它们，您可以重新应用任何填充或边距。此外，我不知道你想要什么宽度，我只是用％ – ajmajmajma

@TobiasYeomans猜测这个东西，如果你发布你的尝试将这个应用到你的问题的东西作为更新，我可以尝试和帮助:) – ajmajmajma

答

没有设置width s把图像放在他人的广告之前删除浮动：从h2和p左。

<style> 
.box3 { 
    margin-top:3px; 
    margin-left:5%; 
    float:left; 
    width:65%; 
    background:#707070; 
    height:300px; 
} 

.minecrafter { 
    font-family:minecrafter; 
    color:#FFFFFF; 
} 
</style> 

<div class="box3"> 
    <img src="images/applyheretoday.png" style="height:90%;float:right;margin-top:13px;margin-right:10px"> 
    <h2 class="minecrafter" style="padding-left:15px;padding-top:10px;letter-spacing:3px;">Apply Now</h2> 
    <p class="minecrafter" style="padding-left:15px;letter-spacing:1px;padding-top:5px;font-size:13px;">Lorem ipsum dolor sit amet, mel id fabulas dolorum, lorem vulputate ei his. </p> 
</div>

http://jsfiddle.net/k8reyzhc/

答

看起来你有太多的事情浮动。如果你想IMG在右边，那应该是你需要浮动的唯一东西。你必须首先包含IMG。

这里的修正HTML代码：

<div class="box3"> 
    <img src="images/applyheretoday.png" style="height:90%;float:right;margin-top:13px;margin-right:10px" /> 
    <h2 class="minecrafter" style="padding-left:15px;padding-top:10px;letter-spacing:3px;">Apply Now</h2> 
    <p class="minecrafter" style="padding-left:15px;letter-spacing:1px;padding-top:5px;font-size:13px;">Lorem ipsum dolor sit amet, mel id fabulas dolorum, lorem vulputate ei his. </p> 
</div>

浮动css元素的问题

相关推荐