Question

我有以下HTML

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div class="container2">
        <div class="container1">
            <div class="col1">
                <div class="para">
                    Sinds 2007 is For the Road een gerespecteerd muziekbedrijf met het accent op boekingen, advies en management. Een uitgebreid netwerk van podia, pers en partners in de muziekindustrie vormen de basis waarmee bands en singer-songwriters bij For the Road zich kunnen ontwikkelen tot een succesvolle act. Met de ervaring opgedaan met bands als T-99, Sinas, Cuban Heels, Rob van de Wouw, Carlo de Wijs, New Cool Collective, Zuco103, C-mon & Kypski en vele anderen, helpt For the Road  bands met alle facetten in de aanloop naar succes. Denk hierbij aan boekingen, strategisch management, creative management, pr, advies en het maken van verbindingen met relevante partners. De kracht van For the Road is het helpen van ambitieuze talentvolle bands en singer-songwriters in de opbouwfase naar (groter) succes.
                </div>

            </div>
            <div class="col2">
                Sinds 2007 is For the Road een gerespecteerd muziekbedrijf met het accent op boekingen, advies en management. Een uitgebreid netwerk van podia, pers en partners in de muziekindustrie vormen de basis waarmee bands en singer-songwriters bij For the Road zich kunnen ontwikkelen tot een succesvolle act. Met de ervaring opgedaan met bands als T-99, Sinas, Cuban Heels, Rob van de Wouw, Carlo de Wijs, New Cool Collective, Zuco103, C-mon & Kypski en vele anderen, helpt For the Road  bands met alle facetten in de aanloop naar succes. Denk hierbij aan boekingen, strategisch management, creative management, pr, advies en het maken van verbindingen met relevante partners. De kracht van For the Road is het helpen van ambitieuze talentvolle bands en singer-songwriters in de opbouwfase naar (groter) succes.
            </div>
        </div>
    </div>
</body>
</html>

以及下面的CSS。

.container2 {
    clear: left;
    float: left;
    width: 100%;
    overflow: hidden;
}

.container1 {
    float: left;
    width: 100%;
    right: 50%;
}

.col1 {
    float: left;
    width: 46%;
    left: 52%;
    overflow: hidden;
}

.col2 {
    float: left;
    width: 46%;
    left: 56%;
    overflow: hidden;
    padding-left: 5em;
}

这里我试图制作一个2列div布局。这时我运行这个，在全屏模式下。这很好用。以下是输出。

http://liveweave.com/gqio3u

但是当我在小屏幕上观看时，内容看起来就像是另一个div之下的内容。

我知道使用position: relative可以解决问题。但是我需要上传内容的应用程序，不接受position，它会抛出错误。

请让我知道如何解决这个问题。即使我调整大小，我也需要2列布局。

由于

Answer 1

我创建了JSFiddle

for

请看一下，这将为您解决问题。

制作一个带有位置的两列div布局

1 个答案: