為什么兩個div不並排

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

嘗試設置容器的寬度。 請嘗試以下代碼：

#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的左側也應該起作用。

無論如何，我建議將右div的寬度設為靜態，例如：

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

為什么兩個div不並排

問題描述

1 個解決方案

解決方案1
0 已采納 2015-09-20 21:02:42

為什么兩個div不並排

問題描述

1 個解決方案

解決方案1 0 已采納 2015-09-20 21:02:42

解決方案1
0 已采納 2015-09-20 21:02:42