Html 制作一个带out位置的两列div布局_Html_Css

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

html css

Html 制作一个带out位置的两列div布局,html,css,Html,Css,我有下面的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

我有下面的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>

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

但当我在小屏幕上查看时，内容看起来就像一个

div

在另一个下方

在这里，我知道使用

position:relative

可以解决这个问题。但是我们需要上传内容的应用程序不接受

位置

，它会抛出一个错误

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

谢谢

我已经创建了一个

请看一看，这会帮你解决问题。

你的链接不起作用，请修复它。使用引导程序使其响应pageHi@KhrisAzuaje，链接起作用，但加载时间很短。@Wisdmlab，我需要使用纯HTML和CSSY您可以使用移动设备的媒体查询，并在移动设备媒体查询中使用50%的宽度。@user3872094要获得最佳结果，请使用，它将对您更有帮助。

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

.col1 {
   float: left;
   width: 45%;
   overflow: hidden;
   padding-right:2%;
 }

.col2 {
   float: left;
   width: 45%;
   overflow: hidden;  padding-left:2%;
 }