Question

我想要一个宽大的顶部图像，然后是两个并排的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;
}

但它们仍然叠在一起？我虽然左右浮动应该达到这个效果？

Answer 1

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

Model.where(b1: param_value, b2: nil).update_all(b2: some_value)

将浮动设置为右侧div的左侧也应该有效。

无论如何，我建议将右侧div的宽度设为静态，如：

#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;
}

为什么两个div不是并排的

1 个答案: