CSS：Div包装浮动元素

Question

我有以下内容：

我想要这个：

如果我从第一个删除margin-left: 200px;我得到第二个，但我的问题是如果我用<adaptable div>将另一个div放入witdh="100%"，它的宽度变为600px（浮点div的400px + 200px），所以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;，以便表格始终位于白色框左侧的区域中（如果您想要将大红色框的宽度增加到超过600px）

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

希望这可以帮助。

Answer 2

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

.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;
}

<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>

Answer 3

你可以解决这个问题，给width =“100％”div一个-200xx的右边距（因此它适合较小的部分），或者在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）。