为什么两个div不是并排的

我想要一个宽的顶部图像，然后两个div并排。包含一个标题和段落和一个图像：为什么两个div不是并排的

我有这样的：

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <link rel="stylesheet" href="style.css"> 
</head> 

<body> 
    <img class="full-width-image" src="img/location/1.gif"> 
    <div id = "left"> 
     <h1 class = "top-padded">The Progs</h1> 
     <p>wdnweidnweldnwnwlenwwnww</p> 
    </div> 
    <div id = "right"> 
     <img class="half-width-image" src="img/location/1.gif"> 
    </div> 
</body>

这：

#left {float: left;} 

#right {float: right;} 

.top-padded {padding-top: 1%;} 

.full-width-image { 
    width: 100%; 
    height: auto; 
} 

.half-width-image { 
    width: 30%; 
    height: auto; 
}

但他们仍然堆放在彼此的顶部？我虽然左右浮动应该达到这种效果？

来源

2015-09-20 JSHD

删除'浮动：权利;''从＃right'。同时添加'display：inline-block;'同时添加'＃left'和'＃right' – divy3993

如果我理解正确，[this]（http://jsfiddle.net/aw4mhjkb/）你想要对吗？ – divy3993

干杯divy3993。 – JSHD

尝试设置容器的宽度。请尝试以下代码：

#left {float: left; width: 69%;} 

#right {float: left; width: 30%;} 

.top-padded { 
    padding-top: 1%; 
} 

.full-width-image { 
    width: 100%; 
    height: auto; 
} 

.half-width-image { 
    height: auto; 
}

将float设置为正确的div的左侧也应该起作用。

无论如何，我会建议作出正确的股利静态的宽度等：

#right {float: right; width: 300px;}

来源

2015-09-20 21:02:42 headione

为什么两个div不是并排的

回答

相关问题