我有以下 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 布局。当我在全屏模式下运行它时。这很好用。下面是输出。
但是当我在小屏幕上查看它时，内容看起来就像一个 div 在另一个 div 之下。
这里我知道使用position:relative可以解决问题。但是我需要上传内容的应用程序不接受 position，它会抛出错误。
请让我知道如何解决这个问题。即使我调整大小，我也需要 2 列布局。
谢谢
最佳答案
我创建了一个 JSFiddle
.col1 {
float: left;
width: 45%;
overflow: hidden;
padding-right:2%;
}
.col2 {
float: left;
width: 45%;
overflow: hidden; padding-left:2%;
}
请看一下，这对你有用。
关于html - 制作一个没有位置的两列 div 布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32135006/