Как сделать, чтобы 2 колонны плавали друг над другом - PullRequest
Новая
       0

Как сделать, чтобы 2 колонны плавали друг над другом

0 голосов
/ 01 апреля 2020

Мне интересно, что я должен сделать, чтобы две колонны плавали друг над другом. Я пытался и не мог найти ничего, что могло бы мне помочь, очень признателен за помощь. 

* {
    box-sizing: border-box;
    }
    ul {
    list-style-type: none;
    margin: 0%;
    padding: 0%;
    overflow: hidden;
    background-color:gray;
    }
    h1 {
        font-size: 170%;
    }
    body {
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
        background-color: lightsteelblue;
        
    }
    /* Create two equal columns that floats next to each other */
.column {
    float: left;
    width: 50%;
    padding: 10px;
    height: 300px; 
  }
  
  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/Publikation.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Publikation </title>
</head>
<body>   
<h1 align="center">Publikation av webbplatser med och utan webbpubliceringssystem</h1>
<ul>   
</ul>
<style> 
</style>
<div class="row">
    <div class="column" style="background-color: #aaa;">
        <h2>column1</h2>
    </div>
    <div class="column" style="background-color: #bbb;">
        <h2>column2</h2>
        </div>

</div>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 02 апреля 2020

Также вы можете попробовать с flexboxes: 

.column {
  float: left;
  width: 50%;
  padding: 10px;
  height: 300px; 
  }
  
.row {
  display: flex;
  flex-direction: column;
  align-items: center;
} 
<h1 align="center">Publikation av webbplatser med och utan webbpubliceringssystem</h1>
<ul>   
</ul>
<style> 
</style>
<div class="row">
    <div class="column" style="background-color: #aaa;">
        <h2>column1</h2>
    </div>
    <div class="column" style="background-color: #bbb;">
        <h2>column2</h2>
        </div>

</div>
0 голосов
/ 02 апреля 2020

вы можете дать им width:100%, чтобы они заняли ряд: 

* {
    box-sizing: border-box;
    }
    ul {
    list-style-type: none;
    margin: 0%;
    padding: 0%;
    overflow: hidden;
    background-color:gray;
    }
    h1 {
        font-size: 170%;
    }
    body {
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
        background-color: lightsteelblue;
        
    }
    /* Create two equal columns that floats next to each other */
.column {
    float: left;
    width: 100%;
    padding: 10px;
    height: 300px; 
    /*
    width:50%
    margin:25%;
    margin-top:0px;
    margin-bottom:0px;
    */
  }
  
  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/Publikation.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Publikation </title>
</head>
<body>   
<h1 align="center">Publikation av webbplatser med och utan webbpubliceringssystem</h1>
<ul>   
</ul>
<style> 
</style>
<div class="row">
    <div class="column" style="background-color: #aaa;">
        <h2>column1</h2>
    </div>
    <div class="column" style="background-color: #bbb;">
        <h2>column2</h2>
        </div>

</div>
</body>
</html>
или вы можете дать им поле, чтобы они занимали как левую, так и правую стороны, чтобы каждый занимал по строке: 

* {
    box-sizing: border-box;
    }
    ul {
    list-style-type: none;
    margin: 0%;
    padding: 0%;
    overflow: hidden;
    background-color:gray;
    }
    h1 {
        font-size: 170%;
    }
    body {
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
        background-color: lightsteelblue;
        
    }
    /* Create two equal columns that floats next to each other */
.column {
    float: left;
    padding: 10px;
    height: 300px; 
    width:50%;
    margin:25%;
    margin-top:0px;
    margin-bottom:0px;
  }
  
  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/Publikation.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Publikation </title>
</head>
<body>   
<h1 align="center">Publikation av webbplatser med och utan webbpubliceringssystem</h1>
<ul>   
</ul>
<style> 
</style>
<div class="row">
    <div class="column" style="background-color: #aaa;">
        <h2>column1</h2>
    </div>
    <div class="column" style="background-color: #bbb;">
        <h2>column2</h2>
        </div>

</div>
</body>
</html>
, если вы решите использовать поля, обратите внимание, что вам необходимо настроить размеры и поля для разных размеров экрана, используя CSS Правила для носителей
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...