Question

我试图将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>

为什么两列不在同一行中是什么原因？

Answer 1

您缺少display: flex类的row属性。

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

Answer 2

尝试将每个列沿一个方向浮动。

 <div class='column' style='float: left'>
 <div class='column' style='float: right'>

JSFiddle

为什么每一列在不同的行？

2 个答案: