標識和標題文本不對齊和重疊

我是基於網絡編程的新手，我一直在標題上遇到問題，標識和文本總是重疊，我一直在嘗試一些浮動和調整標題的大小，但似乎並沒有預算。這是我的代碼：標識和標題文本不對齊和重疊

CSS：

#container{ 
    width: 1040px; 
    margin: 30px auto; 
    border: 10px solid white; 
    border-radius: 20px; 
    background-color:#ffffff; 
} 

#header{ 
    width:100%; 
    height:200px; 
    margin:15x auto; 
    padding: 4px; 
    overflow:hidden;  
} 

.headpart{ 
    width:60%; 
    height:auto; 
    vertical-align:top; 
    position:relative; 
    float:left; 
    font-size:28px; 
} 

img{ 
    position:absolute; 
    vertical-align:top; 
    float: left; 
}

HTML：

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="css/tampilan.css"> 
<meta charset="utf-8"> 
<title>home</title> 
</head> 
<body> 
<div id="container"> 
<div id="header"> 
<div class="headpart"> 
<img src="image/logo.jpg" width=135px height=120px> 
<p id="pheader"> Lembaga Pengkajian Pangan Obat obatan dan Kosmetika Majelis Ulama Indonesia</p> 
</div> 
</div> 

    <div id="isi"> 
     <div id="content"></div> 
     <div id="side"></div> 
    </div> 

    <div id="footer"></div> 
</div> 
</body> 
</html>

來源

2014-07-16 goateee25

刪除CSS中'位置：絕對;'在'img'下。這將使所有內聯（假設這就是你想要的）。 –

You can use this code.

Live Demo

 <div id="container"> 
     <div id="header"> 
     <div class="headpart"> 
     <img src="image/logo.jpg" width=135px height=120px> 
      <p id="pheader"> Lembaga Pengkajian Pangan Obat obatan dan Kosmetika Majelis Ulama Indonesia</p> 

    </div> 
    </div> 

     <div id="isi"> 
      <div id="content"></div> 
      <div id="side"></div> 
     </div> 

     <div id="footer"></div> 
    </div> 


    #container 
{ 
width:1040px; 
margin:30px auto; 
border: 10px solid black; 
border-radius: 20px; 
background-color:red; 
} 

#header 
{ 
width:100%; 
height:200px; 
margin:15px auto; 
padding: 4px; 
overflow:hidden; 
} 

.headpart 
{ 
width:60%; 
height:auto; 
vertical-align:top; 
position:relative; 
float:left; 
font-size:20px; 
} 

img 
{ 
position:absolute; 
vertical-align:top; 
float:left; 
} 
p 
{ 
    margin-left:150px; 
}

來源

2014-07-16 04:18:49 Developer

它確實有幫助，儘管我已經找到了與你一樣的匹配代碼，謝謝。 – goateee25

我對你的幫助感覺很好。 – Developer

Working Fiddle

#container{ 
    width: 1040px; 
    margin: 30px auto; 
    border: 10px solid white; 
    border-radius: 20px; 
    background-color:#ffffff; 
} 

#header{ 
    width:100%; 
    height:200px; 
    margin:15x auto; 
    padding: 4px; 
    overflow:hidden;  
} 

.headpart{ 
    width:60%; 
    height:auto; 
    vertical-align:top; 
    position:relative; 
    float:left; 
    font-size:28px; 
    } 

img{ 
    vertical-align:top; 
    float: left; 
}

來源

2014-07-16 04:01:28 Jatin

標識和標題文本不對齊和重疊

回答

相關問題