Question

我是基于网络编程的新手，我在标题上遇到了麻烦，徽标和文本似乎总是重叠，我一直在尝试一些浮动并调整标题的大小但是没有似乎让步了。这是我的代码：

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>

Answer 1

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;
 }

Answer 2

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;
}

徽标和标题文本未对齐和重叠

2 个答案: