3divs的HTML/CSS定位

我的html/css文本出了問題。林編碼非常新，所以這是一個非常基本的問題：3divs的HTML/CSS定位

我的2左側的文本塊應該放在左側（它工作正常）。在另一方面，權長塊以某種方式排列在第二塊的權利，但真的應該就在旁邊兩個塊（所以雙方都同樣長）我的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:[email protected]" >[email protected] </a> 
</p> 
     </div> 
</body> 
</html>

我有的是：

left1 
left2 right1 
     right1

我想是：

left1 right1 
left2 right1

來源

2017-08-13 Marcel

上選擇.left div添加

.left { 
    float: left; 
    width: 50%; 
    border: none; 
}

，並改變你的風格，以

.left div { 
    height: 480px; 
    margin-top: 40px; 
    margin-bottom: 10px; 
    margin-left: 30px; 
    background-color:white; 
    clear: left; 
}

試試這個，是你想要的結果嗎？

來源

2017-08-14 02:15:33 MinimalistYing

應用下面的造型變化，應用於浮動離開。左容器

.left{ 

    float:left; 
}

來源

2017-08-13 22:31:08

3divs的HTML/CSS定位

回答

相關問題