Моя # 1 попытка выходит из строя из-за заполнения в col.
Мой # 2 попробуйте, потому что я должен делать что-то глупое.
Здесь желаемый результат:
Может кто-нибудь мне помочь? Пожалуйста, избегайте переписывания правил начальной загрузки, если это возможно.
Основной принцип Таблица → строка/столбец заключается в том, что в определенной строке столбцы должны быть одинаковой высоты независимо от содержимого.
Вы можете сделать структуру table → row/columns с помощью бутстраповой сетки, но будет столбец с равными высотами.
Итак, для этой цели, т.е. для равных столбцов, вы можете использовать свойство flexbox. (он не работает в ie9 и менее так, чтобы быть уверенным в его использовании.)
Просто добавьте следующий простой CSS в родительский контейнер (для полной демонстрационной проверки выше скрипта),
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
Вы можете использовать table-responsive:
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr> <td></td> <th>Chrome</th> <th>Firefox</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr>
</thead>
<tbody>
<tr>
<th scope="row">Android</th>
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
<td class="text-muted" rowspan="3" style="vertical-align:middle">N/A</td>
<td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not Supported</td>
<td class="text-muted">N/A</td>
</tr>
<tr>
<th scope="row">iOS</th>
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
<td class="text-muted">N/A</td>
<td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
</tr>
<tr>
<th scope="row">Mac OS X</th>
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
</tr>
<tr>
<th scope="row">Windows</th>
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
<td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not Supported</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>Вы пытались использовать таблицу Bootstrap? Если нет, я бы рекомендовал вам это сделать и установить <td> с необходимой шириной. Например:
<tr class="something">
<td class="col-md-2">A</td>
<td class="col-md-3">B</td>
<td class="col-md-6">C</td>
<td class="col-md-1">D</td>
Как и раньше, вы можете использовать теги таблицы. Но если вы все еще хотите использовать divs, вы можете использовать класс сетки Bootstrap, чтобы ваша таблица по-прежнему выглядела хорошо на каждом размере экрана. Я отредактировал ваш код следующим образом:
<style>
.table {
width: auto;
margin: 0 auto;
border: 1px solid red;
}
.table .row {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.table .row div {
border: 1px solid red;
}
</style>
<div class="table">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<img src="image1.jpg" alt="image1">
Some content here. Hello stackoverflow!
</div>
<div class="col-lg-8 col-md-8 col-sm-8">
Some content here. Hello world!
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<img src="image2.jpg" alt="image2">
Some content here. Hello stackoverflow!
</div>
<div class="col-lg-8 col-md-8 col-sm-8">
Some content here. Hello world!
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<img src="image3.jpg" alt="image3">
Some content here. Hello stackoverflow!
</div>
<div class="col-lg-8 col-md-8 col-sm-8">
Some content here. Hello world!
</div>
</div>
</div>
Как вы можете видеть, я использовал display: flex; и flex-wrap: wrap; в .row, чтобы сделать ячейки одинаковой высоты.
Удачи!
Я внес некоторые изменения в ваш код. но я не знаю, из-за чего вы ожидаете:
HTML:
<div class="container">
<div class="row">
<div class="image-column col-md-4">
<img src="" alt="image" />
</div>
<div class="image-column col-md-4">
<img src="" alt="image" />
</div>
<div class="image-column col-md-4">
<img src="" alt="image" />
</div>
</div>
<div class="row">
<div class="content-column col-md-4">
Some content here. Hello world!
</div>
<div class="content-column col-md-4">
Some content here. Hello world!
</div>
<div class="content-column col-md-4">
Some content here. Hello world!
</div>
</div>
</div>
CSS
/* CSS used here will be applied after bootstrap.css */
.container {
text-align: center;
}
.container .row {
display: flex;
}
.container .row:nth-child(even) {
background: gainsboro;
}
.container .content-column, .container .image-column {
border: 1px solid grey;
}
.container .row:not(:first-child) .content-column, .container .row:not(:first-child) .image-column {
border-top: 0px;
}
.container .content-column:not(:first-child), .container .image-column:not(:first-child) {
border-left: 0px;
}
.image-column {
padding: 5px;
}
.content-column {
border: 1px solid grey;
border-top: 0px;
font-size: 1.3em;
}
.content-column:not(:first-child) {
border-left: 0px;
}
Результат:
Проверьте это в действии: http://www.bootply.com/1MaNWk0ybV
вы можете использовать отображение строки: таблица colum display: table-cell
Пожалуйста, см. работу DEMO. Это именно то, что вам нужно.... Надеюсь, что это поможет вам немного.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container" >
<div class="row" style="border: 1px solid grey;">
<div class="col-md-4 col-sm-4 col-xs-4 text-center" style="border-right:1px solid grey">
<img src="https://www.mozilla.org/media/img/styleguide/identity/firefox/guidelines-logo.7ea045a4e288.png" width="20" height="20" class="img-circle"/>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 text-center" style="border-right:1px solid grey">
<img src="https://www.mozilla.org/media/img/styleguide/identity/firefox/guidelines-logo.7ea045a4e288.png" width="20" height="20" class="img-circle"/>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 text-center" style="border-right:1px solid grey">
<img src="https://www.mozilla.org/media/img/styleguide/identity/firefox/guidelines-logo.7ea045a4e288.png" width="20" height="20" class="img-circle"/>
</div>
</div>
<div class="row" style="border: 1px solid grey;background-color:#f3f3f3">
<div class="col-md-4 col-sm-4 col-xs-4 text-center" style="border-right:1px solid grey">
<strong>Yes</strong>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 text-center" style="border-right:1px solid grey">
<strong>Yes</strong>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 text-center" style="border-right:1px solid grey">
<strong>Yes</strong>
</div>
</div>
</div>Вот код вашей проблемы, может быть, это может вам помочь.
Проверьте эту ссылку на скрипку JSFiddle
HTML CODE
<div style="width: 900px; margin: 0 auto;display:table-cell; border: 1px solid red;">
<div class="row">
<div class="col-md-4 tableColumnDiv">
<img src="" alt="image"> Some content here. Hello stackoverflow!
</div>
<div class="col-md-8 tableColumnDiv">
Some content here. Hello world!
</div>
</div>
<div class="row">
<div class="col-md-4 tableColumnDiv">
<img src="" alt="image"> Some content here. Hello stackoverflow!
</div>
<div class="col-md-8 tableColumnDiv">
Some content here. Hello world!
</div>
</div>
<div class="row">
<div class="col-md-4 tableColumnDiv">
<img src="" alt="image"> Some content here. Hello stackoverflow!
</div>
<div class="col-md-8 tableColumnDiv">
Some content here. Hello world!
</div>
</div>
</div>
CSS CODE
.image-column {
border: 1px solid black;
}
.tableColumnDiv{
display:table-cell;
border: 1px solid black;
}
Aigzy и Waldir оба предоставляют хорошие решения, но они делают ту же ошибку. Решения, которые они предлагают, не реагируют. На мобильном телефоне "таблица" больше не будет читаема. Чтобы этого избежать, вам нужно вложить столбцы на один уровень больше, например:
<div class="row">
<div class="col-md-4">
<div class="col-md-12"> (image) </div>
<div class="col-md-12"> (text) </div>
</div>
<div class="col-md-4">
<div class="col-md-12"> (image) </div>
<div class="col-md-12"> (text) </div>
</div>
<div class="col-md-4">
<div class="col-md-12"> (image) </div>
<div class="col-md-12"> (text) </div>
</div>
</div>
Вот рабочий код: Ссылка на загрузку
двухэтапный процесс:
Добавьте дополнительный класс (.row-table) для .row и назначьте следующие свойства css.
.row-table{ display:flex;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;}
Добавьте дополнительный класс .table-cell в наш col-x-x и назначьте следующие свойства css.
.table-cell{ border-color: black; border-style:solid; border-width:1px 0 0 1px;}
.row-table .table-cell:last-child{ border-right-width:1px;}
.row-table:last-child .table-cell{ border-bottom-width:1px;}
Примечание: ширина столбца зависит от используемых вами классов сетки столбцов.
Попробуйте это и прочитайте комментарии в области CSS: http://www.bootply.com/byopZWzR2K
Этот код разрешит вертикальное выравнивание любой ячейки.
Вот такой же код:
CSS
/* This play-area class is just for testing and aligned the width of this table */
.play-area{width:400px;margin:19px auto}
.play-area img{height:32px;}
.make-this-table{border:1px solid #d7d7d7;overflow:hidden;} /* this to give our table outer border */
.make-this-table .row{border-top:1px solid #d7d7d7;background:#e7e7e7} /* This simple to add separator line between each row also to give each row background color */
.make-this-table .row:nth-child(1){border:none;background:#c5c5c5} /* This to ignore the separator for the first row since it will be the head of this table. You can remove this line to have this table without head */
/* This code to make rows in alternative background colors */
.make-this-table .row:nth-child(even) {background:#fff}
/* This to make the text vertical align in middle if the next column in the same row has more than one line while the first column just one line like the second row in this table .. You can remove this line if you like to make the alignment at the top of the cell. */
.make-this-table .row{align-items: center;display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
-
HTML
<div class="play-area">
<div class="make-this-table">
<div class="row">
<div class="col-md-4 col-xs-4">
<img src="http://www.chromium.org/_/rsrc/1438811752264/chromium-projects/logo_chrome_color_1x_web_32dp.png" alt="" style="">
</div>
<div class="col-md-8 col-xs-8">
<img src="https://www.mozilla.org/media/img/styleguide/identity/firefox/guidelines-logo.7ea045a4e288.png" alt="" style="width:32px;">
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4">
Chrome Browser.
</div>
<div class="col-md-8 col-xs-8">
Firefox Browser.
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4">
Updated.
</div>
<div class="col-md-8 col-xs-8">
Not Updated<br>New line.<br>Now firefox is updated.
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4">
Try new line.
</div>
<div class="col-md-8 col-xs-8">
Adding image to break line: <img src="http://www.w3schools.com/images/compatible_edge.gif" alt="">
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4">
Keep trying ..
</div>
<div class="col-md-8 col-xs-8">
Also keep trying Ya labba ..
</div>
</div>
</div>
</div>
Как насчет следующего aproach:
Он использует CSS для установки отображения, поэтому столбцы имеют одинаковую высоту. Найдено CSS по следующей ссылке:
В вашем втором примере я изменил столбец image и content-column, его работа.. Попробуйте это, это может вам помочь...
<link rel="stylesheet" href="#" onclick="location.href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'; return false;">
<style>
/* CSS used here will be applied after bootstrap.css */
.row {
display: flex;
}
.image-column {
border: 1px solid black;
}
.content-column {
border: 1px solid black;
}
</style>
<div style="width: 90%; margin: 0 auto;">
<div class="row">
<div class="col-md-4 image-column">
<img src="http://icons.iconarchive.com/icons/google/chrome/72/Google-Chrome-icon.png" alt="image"> Some content here.
</div>
<div class="col-md-8 content-column">
Some content here. Hello world!
</div>
</div>
<div class="row">
<div class="col-md-4 image-column">
<img src="http://icons.iconarchive.com/icons/google/chrome/72/Google-Chrome-icon.png" alt="image"> Some content here.
</div>
<div class="col-md-8 content-column">
Some content here. Hello world!
</div>
</div>
<div class="row">
<div class="col-md-4 image-column">
<img src="http://icons.iconarchive.com/icons/google/chrome/72/Google-Chrome-icon.png" alt="image"> Some content here.
</div>
<div class="col-md-8 content-column">
Some content here. Hello world!
</div>
</div>
</div>