центрирование 3-столбцового div, содержащего текст с переменным размером в другом div

Question

Я пытаюсь создать 3-столбцовый макет полностью из DIV, но у меня есть трудности.

Если бы я использовал столы старого HTML 4, как я могу это сделать:

<div style="width:100%"> 
    <table width="50%" align="center"> 
     <tr> 
      <td align="left"> 
       <img src="whatever.jpg"> 
      </td> 
      <td align="center"> 
       1 2 3 
      </td> 
      <td align="right"> 
       <img src="whateverright.jpg"> 
      </td> 
     </tr> 
    </table> 
</div> 

И хорошая вещь таблица занимает 50%, а таблица по центру. Вот что я пытался в DIV:

<div style="width:100%;overflow:hidden;"> 
    <div> 
     <div style="float:left;"> 
      <img src="whatever.jpg"> 
     </div> 
     <div>1 2 3</div> 
     <div style="float:right;"> 
      <img src="whateverright.jpg"> 
     </div> 
    </div> 
</div> 

Единственный способ, которым я мог бы это сделать, если я знаю, что общий размер в пикселях или Эма всех элементов внутренней DIV, то я мог бы установить ширину этого и центра это, но вот проблема.

Изображения, которые я использую, относятся к спрайтам, а размеры выражаются в пикселях. Средний текст, который я использую, - это номера большого размера. Размер текста настраивается на основе разрешения экрана пользователя.

Задание размера текста в пикселях приведет к тому, что люди с неправильным монитором размера будут иметь проблемы с чтением чисел. Я создаю передовую систему разбиения на страницы.

Есть ли способ, которым я могу центрировать div из трех столбцов внутри другого div, не требуя суммы внутренней ширины div?

Я пробовал только добавить margin:auto к главному div внутри внешнего div без успеха.

И помните,

Внутренние колонны внутри DIV делают делают правильно для меня, как мне это нравится. Это просто вопрос о том, чтобы сосредоточить все это хорошо внутри большого div - проблема. И я ищу решение, которое может работать с IE7.

Answer 1

Итак, вы должны использовать свойства дисплея соответственно.

.table{ 
 
    width: 500px; 
 
} 
 
.row{ 
 
    width: inherit; 
 
    display: block; 
 
} 
 
.cell{ 
 
    width: 33.3%; 
 
    height: 50px; 
 
    
 
    display: inline-block; 
 
    vertical-align: top; 
 
    
 
    text-align: center; 
 
    margin: 0px -2.5px; 
 
    border: 1px solid #C0C0C0; 
 
}

<div class='table'> 
 
    <div class='row'> 
 
     <div class='cell'> 
 
      <img src="whatever.jpg"> 
 
     </div> 
 
     <div class='cell'>1 2 3</div> 
 
     <div class='cell'> 
 
      <img src="whateverright.jpg"> 
 
     </div> 
 
    </div> 
 
      
 
      
 
    <div class='row'> 
 
     <div class='cell'> 
 
      <img src="whatever.jpg"> 
 
     </div> 
 
     <div class='cell'>1 2 3</div> 
 
     <div class='cell'> 
 
      <img src="whateverright.jpg"> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

Я думаю, что это решит вашу проблему

HTML

<div style="width:100%;overflow:hidden;"> 
<div> 
    <div class="div" style=""> 
     <img src="whatever.jpg"> 
    </div> 
    <div class="div2">1 2 3</div> 
    <div class="div3"> 
     <img src="whateverright.jpg"> 
    </div> 
</div> 

CSS

div .div,.div2,.div3{ 
     width: calc(100% - 66.666666%); 
     /* Firefox */ 
     width: -moz-calc(100% - 66.666666%); 
     /* WebKit */ 
     width: -webkit-calc(100% - 66.666666%); 
     /* Opera */ 
     width: -o-calc(100% - 66.666666%); 
     width: expression(100% - 66.666666%); 
     display: inline-block; 
    } 
    .div{ 
     float:left; 
     background:purple; 

    } 
    .div2{ 
     float:right; 
     background:red; 

    } 
    .div3{ 
     background:blue; 
    } 

Answer 3

Мы И оказалось, что реальный ответ для меня состоял в том, чтобы плавать каждый внутренний контейнер и указывать процент ширины для каждого внутреннего контейнера и иметь ширину, чтобы быть шириной внешнего контейнера, и каждый внутренний контейнер должен иметь что-то. Например:

<div style="width:100%;overflow:hidden"> 
    <div style="float:left;width:20%"> 
    some text at left 
    </div> 
    <div style="float:left;width:60%"> 
    some text in middle 
    </div> 
    <div style="float:left;width:20%"> 
    some text at right 
    </div> 
</div>