Question

我在这里有一个问题，为什么左边的cloumn没有绕着右边的cloumn流动

右栏html代码：

＆＃13;

    <div id="sidebar">
      <p class="beanheading">
        <img src="images/bag.gif" alt="Bean Machine bag" />
        <br />
        ORDER ONLINE
        with the 
        <a href="form.html">BEAN MACHINE</a>
        <br />
        <span class="slogan">
            FAST <br />
            FRESH <br />
            TO YOUR DOOR <br />
        </span>
      </p>
      <p>
        Why wait?  You can order all our fine coffees right from the Internet with our new, 
        automated Bean Machine.  How does it work?  Just click on the Bean Machine link, 
        enter your order, and behind the scenes, your coffee is roasted, ground 
        (if you want), packaged, and shipped to your door.
      </p>
    </div>

    <div id="footer">

＆＃13;

右列css代码：

＆＃13;

#sidebar {
  background:       #efe5d0 url(images/background.gif) bottom right;
  font-size:        105%;
  padding:          15px;
  margin:           0px 10px 10px 10px;
  width:            280px;
  float:            right;   
}

＆＃13;

Answer 1

你的问题不明确，但我想，

您有2个块内容，需要在同一行中安排这些内容。

以下是要排列在同一行的左右块的css，

block_left {
  width: x%;
  float: left;
  }
block_right {
  width: y%;
  }

此处宽度为x+y = 100，基于我认为您分享的图片，

block_left {
      width: 70%;
      float: left;
      }
    block_right {
      width: 30%;
      }

浮动效果不佳

1 个答案: