我正在尝试制作一个包含两列的 div，但每一列都位于另一列之下。我不明白为什么。我在这里放置了 html 和 css:
HTML:您可以看到在 h2 之后如何尝试用 1 行和 2 列做除数
html {
background: url(Fondo.jpg) no-repeat center center fixed; /*Poner foto de fondo. */
background-size:cover; /*Para que la foto ocupe toda la pantalla*/
overflow-y:auto; /*Para que salga scroollbar cuando se hace zoom*/
/*overflow-x:auto;*/
font-family: Arial, Helvetica, sans-serif; /*Tipo de letra en todo el documento*/
}
body {
margin: 0 !important; /*Estas dos lineas son para que la navbar este pegada arriba*/
padding: 0 !important;
}
.buttonESCOGER {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: 2px solid rgb(0, 0, 0);
cursor: pointer;
width: 40%;
border-radius: 8px;
}
.buttonESCOGER:hover { /* Que sucede cuando se coloca raton encima de boton */
opacity: 0.8;
background-color: rgb(23, 110, 26);
}
.contenedoresbotones{
padding: 10px;
width: 50%;
margin: 0 auto;
text-align: center; /*Para colocar en mitad de la pantalla*/
}
h1{
color: #6b5b95; font-family: 'Helvetica Neue', sans-serif; font-size: 46px; font-weight: 150; line-height: 20px; letter-spacing: 1px; font-style: oblique; /*d64161*/
text-align: center;
text-shadow: 2px 2px 8px #FF0000;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #045186;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #BBE1FB;
color: black;
}
/* Add an active class to highlight the current page */
.active {
background-color: #2794DE;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
.piedepagina{
position:fixed;
left:0px;
bottom:0px;
height:27px;
width:100%;
background-color: #2794DE;
text-align: center;
float: right;
font-size: 10px;
}
.piedepaginaInside{
display: inline-block;
margin-left: 10px;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
.some-page-wrapper {
margin: 15px;
background-color: red;
}
.row {
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
}
.blue-column {
background-color: blue;
height: 100px;
}
.green-column {
background-color: green;
height: 100px;
}<!DOCTYPE html>
<html >
<title>RoT</title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1", charset="UTF-8">
<!--meta name="viewport" content="width=device-width, initial-scale=1", charset="UTF-8">-->
<link rel="stylesheet" type="text/css" href="css/home.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div class="topnav" id="myTopnav">
<a href="RoT.html" class="active">Home</a>
<a href="Login.html">Iniciar sesion</a>
<a style="float:right" href="#about">Sobre nosotros</a>
<a href="javascript:void(0);" class="icon" onclick="barra()">
<i class="fa fa-bars"></i>
</a>
</div>
<h1>¿Que quieres hacer?</h1>
<div class="contenedoresbotones">
<button class="buttonESCOGER" id="recorrido" value="recorrido" onclick="post();">Buscar recorridos de carreras</button>
<button class="buttonESCOGER" id="tiempos" value="tiempos" onclick="post();">Consultar tiempos</button>
</div>
<h2>Two Equal Columns</h2>
<div class='some-page-wrapper'>
<div class='row'>
<div class='column'>
<div class='blue-column'>
Some Text in Column One
</div>
</div>
<div class='column'>
<div class='green-column'>
Some Text in Column Two
</div>
</div>
</div>
</div>
<footer class="piedepagina">
<i class="fa fa-facebook-official w3-hover-opacity"></i><i class="fa fa-instagram w3-hover-opacity"> </i><i class="fa fa-twitter w3-hover-opacity"> </i><i class="fa fa-linkedin w3-hover-opacity"></i>
<p class="piedepaginaInside">Powered by <a href="https://www.linkedin.com/in/victor-dorado-fern%C3%A1ndez-03b842105/" target="_blank">Victor Dorado</a></p>
</footer>
<script>
function barra() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>两列不在同一行的原因是什么？
最佳答案
row 类缺少 display:flex 属性。
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
关于javascript - 为什么每一列都在不同的行中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55049593/