如何让我的div标签不会相互移动？

I took time to format a div tag for my main content and then I put that div inside a wrapper div. Well, when I went to add my logo to the site, everything shifted. The div that the logo was in seemed to have pushed the wrapper tag down. Being new to code, I'm trying to keep my design as clean as possible but it is falling apart. Any suggestions? Any help? In the fiddle, I started the HTML code where the img source, this was the image that -when added- pushed my content down.

我花时间为我的主要内容格式化div标签然后我将该div放在包装器div中。好吧,当我去网站添加我的徽标时,一切都转移了。徽标所在的div似乎已将包装标签向下推。作为代码的新手,我试图让我的设计尽可能干净,但它正在崩溃。有什么建议?有帮助吗?在小提琴中,我启动了HTML代码,其中包含img源代码,这是添加的图像 - 推送我的内容。

Here is the fiddle http://jsfiddle.net/569Gm/

这是小提琴http://jsfiddle.net/569Gm/

<div id="logo">
   <img src="images/logo/logo-vector.png" />
</div>

<div id="wrapper">

   <div id="aboutus">   
       <p>We are a Hagerstown-based junk removal and moving service. Able to accomplish jobs both big and small, we accept residential, commerical, and industrial jobs. </p>
       <p>&nbsp;</p>
       <p>Active since 2014, we are a relatively new service looking to help as many people as possible. Visit our Facebook Page to stay posted on our recent works, job openings,        special offers and more. </p>
   </div>

   <div id="scheduling">
     <p>To schedule for a service, please provide the information listed
     below and we will respond promptly.</p>
   </div>

   <div id="contactus">
   <p>If you have any questions, comments, or concerns, our contact information is listed below.</p>
   <p>&nbsp;</p>
   <p>Phone: [phone]</p>
   <p>Email: [e-mail]</p>
   </div>   
</div>

</body>
</html>






</div>

This is what my website looks like now that I added the logo. http://www.pixentral.com/show.php?picture=1PYUTuzOhcbLcaoadEpTNk2qnm

这就是我现在添加徽标的网站。 http://www.pixentral.com/show.php?picture=1PYUTuzOhcbLcaoadEpTNk2qnm

2 个解决方案

#1

Add float:left; to your #logo, and use clear:left; instead of clear:both;.
By adding float:left; & clear:left; the #wrapper will come inline with your logo.
See the Demo

添加浮动:左;到#logo,并使用clear:left;而不是明确:两者;通过添加float:left; &clear:left; #wrapper将与您的徽标一致。参见演示

#2

Float your logo left "float: left;". Clear your logo left as well "clear: left;". As a general rule of thumb, anything in the flow of the page /not "absolutely" positioned will need to be floated in some form way or shape unless the "div" containing it is floated. A good way of remembering this is, anything composition related most likely needs to be floated. Float left, assuming your margins and paddings are "margin: 0" "padding:0" will snap your div to as far right or left as the width parameters allow. Floating is really how you build the flow of the page.

将您的徽标浮动“float:left;”。清除您的徽标以及“清除:左侧”。作为一般经验法则,页面流中的任何内容/非“绝对”定位都需要以某种形式或形状浮动,除非包含它的“div”浮动。记住这一点的一个好方法是,任何与组合相关的东西都可能需要浮出水面。向左浮动,假设你的边距和填充是“margin:0”“padding:0”将你的div捕捉到宽度参数允许的最右边或左边。浮动实际上是如何构建页面流的。