CSS：Div包装浮动元素

Question

我有以下内容：

我想要这个：

如果我从第一个删除margin-left: 200px;我得到第二个，但我的问题是，如果我将另一个div放入<adaptable div> witdh="100%"，其宽度将变为600px（400px + 200px）浮动div），所以div放在“BIG ZONE”中，400px区域为空白。

如何首先填充400px区域然后再填充BIG ZONE？

html示例：http://jsfiddle.net/wce25bu1/1

.big {
  height: 400px;
  background: #f00;
  border: 1px solid black;
}

.float {
  width: 200px;
  height: 200px;
  background: white;
  float: right;
}

.table {
  width: 100%;
}


}

<div class="big">
  <div class="float"></div>
  <table class="table">
    <thead>
      <tr>
        <th>Raffle name</th>
        <th>Ticket number</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>This shoud be</td>
        <td>next to the float</td>
      </tr>
    </tbody>
  </table>
  <p>TEXT </p>
</div>

我希望表格与浮动元素对齐。

Answer 1

这应该很容易创建。您不应给表格width:100%，因为这会使其填充其父元素的宽度，因此它将包裹在新队。我所做的是我将其更改为min-width:400px;并添加了margin:0 auto;，以便表格始终位于白框左侧区域的中心（如果您想要增加大红色框和＃39;宽度超过600px）

以下是演示jsfiddle：http://jsfiddle.net/wce25bu1/4/

希望这有帮助。

Answer 2

我认为它会对你有所帮助。

＆＃13;

＆＃13;

.big {
    width:600px;
    background: #f00;
    border:1px solid black;
   
}

.float {
    width: 200px;
    height: 200px;
    background: white;
    float:right;   
}
.table{
    width:350px;
}

.table td{
text-align : center;
}

＆＃13;

<div class="big">
     <div class="float"></div>
<table class="table">
                    <thead>
                    <tr>
                        <th>Raffle name</th>
                        <th>Ticket number</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>2nd Feb Raffle</td> <td>0001</td>
                    </tr>
                    <tr>
                        <td>12nd Feb Raffle</td> <td>0595</td>
                    </tr>
                    <tr>
                        <td>20nd Feb Raffle</td> <td>1201</td>
                    </tr>
                    <tr>
                        <td>22nd Feb Raffle</td> <td>0562</td>
                    </tr>
                    </tbody>
                </table>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti ad et neque quod nobis tenetur earum voluptatem culpa nihil soluta sequi laborum blanditiis suscipit distinctio tempora quisquam at sapiente consequatur natus minus dolorum labore sint nam rerum atque! Distinctio veniam at natus debitis aperiam perspiciatis vel ipsa officiis voluptatem laudantium magnam obcaecati magni dolor unde aspernatur eaque provident. Perspiciatis officiis quo debitis optio velit explicabo voluptas sint quae cupiditate laudantium. Aut similique exercitationem corporis necessitatibus vero ipsum facere nihil sed odio aliquam nisi placeat eligendi nam. Possimus quae enim aspernatur itaque culpa doloribus architecto dolorum magnam ut laborum. Quidem totam vel earum recusandae velit iste esse eos beatae error dignissimos perspiciatis et natus neque animi maxime quas voluptate explicabo id deleniti adipisci iure sit sequi laudantium laboriosam porro! Ea dolorum quam officia totam repellendus eius facere saepe? Ipsum officia dolore magni dicta dolorem alias doloribus laudantium maiores officiis sequi impedit sapiente recusandae assumenda fugiat quas illo quia dolores molestias optio amet architecto laboriosam modi culpa praesentium magnam vero cumque quis. Aspernatur odio ab asperiores obcaecati perspiciatis alias quod dolor laborum nihil porro ea nemo quam illum ducimus sunt vel exercitationem? Omnis magni dolore sunt dolor magnam inventore quisquam quod quasi non reiciendis eius natus eos molestiae sapiente similique veniam amet officiis ipsam laudantium ad eligendi nesciunt doloribus ipsa quibusdam libero adipisci unde. Rerum voluptate voluptatum voluptatem sapiente quasi odio enim facere nihil quam ratione repudiandae nisi nulla officia hic a illo quae maiores neque voluptatibus quod provident corporis eos in deserunt voluptas saepe dolor possimus vitae deleniti eius! </p>
   
    
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

你可以通过给出宽度=＆＃34; 100％＆＃34;来解决这个问题。 div-margin为-200px（因此它适合较小的部分），或者在CSS中生成width: calc(100% - 200px)。

你根本不需要在内部div上指定一个宽度，如果它是显示块，它应该自动适合它的容器div。

Answer 4

您是否考虑过使用相对和绝对定位？

更新：我只是重新安排了容器div。这是你在找什么？ http://jsfiddle.net/dzhu46Lx/4/

CSS：

.float {
 float: right;
 width: 200px; 
 height: 200px;
 background-color: blue;
}
.content{
 position: relative; 
 background-color: red;
 width: 600px;
}
.main-content{
 width: 400px;
}

Answer 5

您可以使用CSS3属性calc来获取填充空间的表格：

table{
    width: calc(100% - 200px);  
}

这将使用100％并删除200px。这实际上是混合百分比和固定单位的唯一方法。

虽然这在IE8中不起作用（http://caniuse.com/#feat=calc）。