Как поместить 2 деления рядом друг с другом без использования метода float

0

У меня есть три изображения divs в линии друг с другом, а над ним у меня есть имя div для 2 изображений. Мне нужно, чтобы имена были центрированы над каждой левой и правой картинками и потому, что названия отличаются по длине, я не могу использовать поля, потому что, очевидно, разные длины заголовков требуют разного поля. Я попробовал команду display: inline-block но это не сработало. Для визуального просмотра см. Ниже:

    Title               Title
---Picture---Picture---Picture---
  • 0
    Может быть, вы должны использовать таблицу вместо?
  • 2
    Почему без метода float ???
Показать ещё 2 комментария
Теги:
inline

2 ответа

0

простой способ сделать это с помощью flex box... но он поддерживает Chrome 29+ unprefixed IE 11+ unprefixed Opera 14+ префикс Chrome 21+ префикс Safari 6. 1+ префикс Firefox 23+ полная поддержка в ближайшее время

.flex-container {
display: -webkit-flex;
display: -moz-flex;
display: flex;
-webkit-flex-flow: row wrap;
-moz-flex-flow: row wrap;
flex-flow: row wrap;
}

.flex-item {
-webkit-flex: 1 auto;
-moz-flex: 1 auto;
flex: 1 auto;
min-height:250px;
background-color:#0FF;
border:1px solid #ccc;}
Поделиться
0

Вот как вы это делаете: JSFIDDLE: http://jsfiddle.net/rw8CF/

HTML

<table>
 <tr>
     <th>Title</th>
     <th></th>
     <th>Title</th>

 </tr>
 <tr>
      <td>Image 1</td>
      <td>Image 2</td>
      <td>Image 3</td>
</tr>

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню