当前位置: 动力学知识库 > 问答 > 编程问答 >

css - Default positioning of parent DIVs is being ignored

问题描述:

I'm a newbie in CSS layout. I need to display content like this:

+-------------------------------------+

| Content_A|

| Content_B Content_C ... |

+-------------------------------------+

I want a very simple markup and CSS, so I made this:

<div>

<div id="d1">

<div style="float: right;">Content_A</div>

</div>

<div id="d2">

<div style="float: left;">Content_B</div>

<div style="float: left;">Content_C</div>

<div>...</div>

</div>

</div>

But the result is this:

+-------------------------------------+

| Content_B Content_C ... Content_A|

+-------------------------------------+

Looks like default positioning of DIVs d1 and d2 is being ignored. Why and what's the solution?

If you have another markup/CSS suggestion for mentioned required layout (using SPAN for example), it will be welcome.

By the way, I mixed HTML and CSS just to make this problem easier to understand. In the real page, they will be separated!

网友答案:

Here is the solution:

<div>
  <div id="d1">
    <div style="text-align: right;">Content_A</div>
  </div>
  <div id="d2">
    <div style="float: left;">Content_B</div>
    <div style="float: left;">Content_C</div>
    <div>...</div>
  </div>
</div>

Let me know if it works for you or if you still have problem.

网友答案:

You can set display format for outer-most div to align the contents vertically:

<div style="display: table;">
  <div id="d1">
    <div style="float: right;">Content_A</div>
  </div>
  <div id="d2">
    <div style="float: left;">Content_B</div>
    <div style="float: left;">Content_C</div>
    <div>...</div>
  </div>
</div>
网友答案:

Try this:

<div>
  <div id="d1">
    <div style="float: right;">Content_A</div>
    <div style="clear:both;"></div>
  </div>
  <div id="d2">
    <div style="float: left;">Content_B</div>
    <div style="float: left;">Content_C</div>
    <div>...</div>
    <div style="clear:both;"></div>
  </div>
</div>

The clear property is a way of saying "make sure this element does not run alongside a previous float". Without having an element with clear, all later content on the page would attempt to flow alongside the columns. You could say that we're telling the browser, "the floats end here".

Check this link for more information.

分享给朋友:
您可能感兴趣的文章:
随机阅读: