0

我想知道我应该怎么做才能使两列相互浮动。我一直在尝试，找不到任何可以帮助我的东西，非常感谢您的帮助。

* {
    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>

4

2 回答 2

0

你可以给他们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 媒体规则调整不同屏幕尺寸的尺寸和边距

于 2020-04-01T22:17:51.717 回答
0

此外，您可以尝试使用 flexbox：

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

于 2020-04-01T22:53:39.380 回答