私は3-5のdivを含むことができる行を持っています。 divは水平方向(左/右)に配置する必要があります。オンにdivの 'フリップ'をクリックして、追加情報を表示します。反転させた場合を除いて、センタリングは正常に機能しています。その後、divの高さが変更され、垂直方向に配置されなくなります。私が追加した場合:その問題が消えるCSSで24行目「フロート残っていない」が、その後、彼らはもはやあなたの.whatToReadCover
要素に.vertical-align: top
を追加し、水平方向センター内のdivのグループ
https://jsfiddle.net/rffxmbh0/1/
#readModal>.modal-lg {
width: 100%;
margin: auto;
}
#readModalContent {
height: 420px;
}
.row-center {
text-align:center;
}
#readModal h2{
padding-left: 25px;
}
.col-centered {
padding:0;
}
.whatToReadCover {
display:inline-block;
float:none;
height: 350px;
width: 255px;
background-color: white;
border: 1px solid;
border-radius: 6px;
margin: 0 0 0 12px;
text-align: center;
}
.whatToReadCover p,
.whatToReadCover .description {
width: 170px;
text-align: left;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
margin:0;
}
.cover {
padding: 0px 0px 0px 30px;
}
.cover-image {
height: 250px;
display: flex;
align-items: center;
}
.whatToReadCover .description {
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 17;
-webkit-box-orient: vertical;
//height: 290px;
white-space: normal;
width: 238px;
padding: 5px 0 0 0;
}
.whatToReadCover:first-child {
margin-left: 0;
}
.whatToReadCover:last-child {}
.more-info {
display: inline-block;
width: 162px;
border: 2px solid #20638f;
padding: 0.4em 0.6em;
color: #20638f;
text-decoration: none;
font-weight: 800;
font-size: 0.9em;
text-transform: uppercase;
margin: 12px 0 0 0;
float: left;
}
どのdivsですか?国境、高さ、幅はどこから来ていますか? –
重要なのは、 'vertical-align'と 'display'のプロパティが重要です。 –