我的 html/css 文本有问题。 我对编码很陌生，所以这是一个非常基本的问题:
我的 2 个 .left 文本 block 应该放在左侧(效果很好)。 另一方面，右侧较长的 block 以某种方式排列在第二个 block 的右侧，但实际上应该紧挨着两个 block (因此两侧的长度相等)我的 Css:
我的 CSS:
body{
background-color:#f6f6f6;
}
div {
border: 1px solid #d3d3d3;
}
#header{
width : 110%;
height : 40px;
background-color: white;
margin-left: -19px;
margin-top: -10px;
position: fixed;
z-index: 1;
margin-bottom:10px;
}
#header h2{
margin-left: 20px;
margin-top:10px;
font-size: 20px;
font-family: Verdana, sans-serif;
color: black;
}
.left div {
height: 480px;
width: 48%;
margin-top:40px;
margin-bottom:10px;
margin-left:30px;
background-color :white;
float: left;
clear: left;
}
.right {
height: 1000px;
width: 48%;
margin-top:40px;
margin-bottom:1px;
background-color :white;
float:right;
}
#footer{
background-color:white;
height: 40px;
width: 100%;
margin-bottom:-30px;
clear: both;
text-align: center;
}
.right p {
margin-left:20px;
}
a:hover{
font-weight:bold;
}
#footer a {
position:relative;
font-family:Arial;
text-decoration:none;
color:black;
}
#footer p {
margin-top:10;
margin-bottom:10;
}
我的 HTML
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>
</title>
</head>
<body>
<div id ="header">
<h2> Meine Website </h2>
</div>
<div class ="left">
<div>
<ul>
<li> erster punkt </li>
<li> zweiter punkt </li>
</ul>
</div>
<div>
<ul>
<li> erster punkt2 </li>
<li> zweiter punkt2 </li>
</ul>
</div>
</div>
<div class ="right">
<p> paragraph </p>
</div>
<div id ="footer">
<p> Meine E-mail:
<a href= "mailto:mstemmeler@online.de" >mstemmeler@online.de </a>
</p>
</div>
</body>
</html>
我有的是:
left1
left2 right1
right1
我想要的是:
left1 right1
left2 right1
最佳答案
添加
.left {
float: left;
width: 50%;
border: none;
}
并将选择器 .left div 上的样式更改为
.left div {
height: 480px;
margin-top: 40px;
margin-bottom: 10px;
margin-left: 30px;
background-color:white;
clear: left;
}
试试这个，是你想要的结果吗？
关于3divs的HTML/CSS定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45665389/