CSS: Div, обертывающий плавающий элемент

У меня есть следующее:

неадаптируемый div

И я хочу это:

адаптируемый div

Если я удалю margin-left: 200px; из первого, я получу второе, но моя проблема в том, что если я помещу другой div в <adaptable div> с witdh="100%", его ширина станет 600px (400px + 200px плавающего div), поэтому div помещается в «БОЛЬШУЮ ЗОНУ». " и зона 400px пуста.

Как мне сделать, чтобы сначала заполнить зону 400px, а затем БОЛЬШУЮ ЗОНУ?

Пример 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>

Я хочу, чтобы таблица была выровнена с плавающим элементом.


html css percentage
person alvaromat    schedule 02.02.2015    source источник
comment
Пожалуйста, опубликуйте HTML и CSS в своем вопросе.   -  person j08691    schedule 02.02.2015
comment
Вы имеете в виду вот так? - jsfiddle.net/wce25bu1   -  person Paulie_D    schedule 02.02.2015

Ответы (5)


arrow_upward
1
arrow_downward

Это должно быть довольно легко создать. Вы не должны давать таблице width:100%, потому что это заставит ее заполнить ширину родительского элемента и, таким образом, будет заключена в новую строку. Что я сделал, так это изменил это значение на min-width:400px; и добавил margin:0 auto;, чтобы таблица всегда центрировалась в области слева от белого поля (на случай, если вы хотите увеличить ширину большого красного поля за пределы 600 пикселей).

Вот демо jsfiddle: http://jsfiddle.net/wce25bu1/4/

Надеюсь это поможет.

person Lazertrax    schedule 02.02.2015

arrow_upward
1
arrow_downward

Я думаю, это поможет вам.

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

person Nazmul Hossain    schedule 02.02.2015

arrow_upward
0
arrow_downward

Вы можете обойти эту проблему, задав div width="100%" margin-right равным -200px (чтобы он помещался в меньший раздел), или в CSS сделайте width: calc(100% - 200px).

Вам вообще не нужно указывать ширину внутреннего div, если это блок отображения, он должен автоматически соответствовать своему div-контейнеру.

person error    schedule 02.02.2015
comment
Почему вы все используете calc для всего: D - person KeySee; 02.02.2015
comment
Это то, чего я пытаюсь избежать. Представьте, что элемент со 100% шириной находится под плавающим элементом. Если я использую margin 200px или calc(), он не заполнит весь div, а если я использую display: block или просто 100% ширину, он будет расположен под плавающим элементом, а предыдущее пространство не будет заполнено. - person alvaromat; 02.02.2015

arrow_upward
0
arrow_downward

Рассматривали ли вы использование относительного и абсолютного позиционирования?

ОБНОВЛЕНИЕ: я просто переставил элементы контейнера. Это то, что вы ищете? 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;
}
person Opi Hana    schedule 02.02.2015
comment
Извините, что дал так мало информации. Я обновил ветку. Также попробовал ваше предложение, но оно не работает (по крайней мере, как я реализовал -› jsfiddle.net/dzhu46Lx) Спасибо за попытку помочь :) - person alvaromat; 02.02.2015

arrow_upward
0
arrow_downward

Вы можете использовать свойство CSS3 calc, чтобы таблица заполнила пространство:

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

Это будет использовать 100% и удалить 200 пикселей. Это действительно единственный способ смешивать проценты и фиксированные единицы.

Однако это не будет работать в IE8 (http://caniuse.com/#feat=calc) .

person John Reid    schedule 02.02.2015