合并分区与图像
合并分区与图像
提问于 2014-04-30 23:21:28
我在把包含我的标题的div (Prestige Worldwide HMC，娱乐中的第一个词)放在我的形象旁边有一些困难。看上去这幅图像，由于其尺寸，正与我的航向相撞，并将其向下推。有没有办法将div移动到图像的右侧，使其位于同一条线上？
HTML：
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="normalize.css"/>
<link rel="stylesheet" type="text/css" href="WebsiteMain.css">
<title>Prestige Worldwide HMC</title>
</head>
<body>
<div id="header">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">R&D</a></li>
<li><a href="#">F.A.Q.</a></li>
<li><a href="#">Investors</a></li>
</ul>
</div>
<div id="mainbody">
<div id="bodycontainer">
<div id="logolevel">
<div id="logo">
<a href="#">
<img src="http://www.mysoti.com/img/user/kongo/product/web/894875/894875_show_default.png"/>
</a>
<div id="Name">
<p>Prestige Worldwide HMC</p>
<p>The First Word In Entertainment</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>和WebsiteMain.css：
* {
outline: 1px solid black;
}
/* HEADER */
#header {
position: relative;
width: 100%;
padding-top: 1%;
padding-bottom: 1%;
}
#menu {
width: 57%;
margin: auto;
}
#menu li {
margin-right: 8%;
display: inline;
font-size: 16px;
color: #003a63;
font-family: arial, sans-serif;
}
a {
text-decoration: none;
}
a:visited {
color: #003a63;
}
a:hover {
color: #78a22f;
}
/* MAIN BODY */
body {
font-family: Helvetica;
}
#mainbody {
background: #f2f9fe; /* Old browsers */
background: -moz-linear-gradient(top, #f2f9fe 0%, #d6f0fd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f9fe), color-stop(100%,#d6f0fd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f2f9fe 0%,#d6f0fd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f2f9fe 0%,#d6f0fd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f2f9fe 0%,#d6f0fd 100%); /* IE10+ */
background: linear-gradient(to bottom, #f2f9fe 0%,#d6f0fd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f9fe', endColorstr='#d6f0fd',GradientType=0 ); /* IE6-9 */
width: 100%;
height: 100%;
}
#logo a img {
margin-left: 14%;
margin-top: -3%;
width: 400px;
height: 300px;
}
#Name {
position: relative;
float: right;
margin-right: 6%;
margin-top: ;
text-align: center;
font-family: Helvetica;
}
#Name p:first-child {
font-size: 500%;
color: #003a63;
}
#Name p:nth-child(2) {
font-size: 150%;
margin-top: ;
color: #78a22f;
}回答 3
Stack Overflow用户
回答已采纳
发布于 2014-05-01 00:00:09
因此，你有一个图像，和一个标题，你想在彼此旁边。那倒是一个问题。你的形象是巨大的-有大量的空白。您应该将其裁剪成图像的实际大小。这没有任何意义。
有关的html是：
<a href="#" class="company-logo">
<img src="http://placehold.it/100x100" />
</a>
<div class="name">
<p>Something Something yeah</p>
<p>Bla bla bla etc etc etc.</p>
</div>小提琴01
显示块级元素的作用方式。(默认情况下，div、p等是display: block )，默认情况下它们的宽度是100%，所以它们互相推送到下一行。这很正常。
小提琴02
显示这些“显示:块”级元素向左浮动，这会将它们带到同一行(只要它们的合并宽度不大于屏幕).在这种情况下，再一次，他们将把对方推到下一行。
小提琴03
将元素显示为display: inline-block，并以“垂直对齐:中间”对齐--您不能让这些元素浮动，否则它们仍然会像块元素一样运行，并且不会遵循您的内联块规则，因此您可能需要放置float: none；如果您处于一个响应环境，在另一种情况下浮动它们。
Stack Overflow用户
发布于 2014-04-30 23:32:03
将css更改为
#logo a img {
margin-top: -3%;
width: 400px;
height: 300px;
float: left;
}还有这个
#Name {
position: relative;
float: left;
margin-right: 6%;
margin-top: ;
text-align: center;
font-family: Helvetica;
}Stack Overflow用户
发布于 2014-04-30 23:35:29
我修复了您的bug，并在这里创建了一个jsBin：http://jsbin.com/ziwebico/1/。我对您的css做了一些小修改，主要添加了以下内容：
#logo a
{
display: inline-block;
float: left;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23399741
复制相关文章
相似问题
腾讯云开发者
