开发者

CSS: Multiple Content in one div?

Is there a way to have one container div that I can put links on the left side and simple text on the right side? I know this can be done, but I've been struggling to get it to work. The code CSS I have would have to be highly modified due to the content I'm serving, so, I've uploaded a moc draft of what I want and see if 开发者_如何学编程you guys can help me out.

CSS: Multiple Content in one div?


<div id="menu">
  <div id="text" style="float:right;width:50%;text-align:right">text</div>
  <div id="links" style="float:left;width:50%">links</div>
  <div style="clear:both"></div>
</div>

Make sure you have that clearing div and the two sides don't touch. Also, as Pekka points out the right content should come first or it will sit below the left.


I think Pekka is correct is saying float:left and float:right are generally the best way to go about tackling this sort of problem.

However, I find that I get a bit more control if I actually float all of the elements left (if you are writing for a language that's read left-to-right), and then let the elements stack on top of each other. That way you can specify margins, padding, and so on, and get exactly the sort of spacing you want.

To start a new line, you can do one of two things (or maybe even more!):

You can set display: block, or you can constrain the width of the container for the links/text such that the next element is forced to wrap around.

Hope that helps!

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜