0
私のページですべてを同じに保とうとしています。 1つのDIVにテキストが多すぎる場合は、面を下に押します。両方のDIVをデスクトップ上の親DIVの最大値と同じ高さに保つにはどうすればよいですか？テキストはDIVsが同じサイズを維持しないようにしています
私はテーブルディスプレイで遊んでみましたが、それは私にとってはうまくいっていませんでしたが、私はそれに精通していません。
<style><!--
\t
.pageRow {
\t display: inline-block;
\t position: relative;
\t width: 100%;
\t text-align: center;
\t vertical-align: middle;
\t white-space: nowrap;
}
.pageBlock {
\t display: inline-block;
\t position: relative;
\t width: 50%;
\t height: 100%;
\t text-align: center;
\t vertical-align: top;
\t padding-left: 15px; \t
\t padding-right: 15px;
\t white-space: normal;
\t
}
.pageText {
\t display: inline-block;
\t position: relative;
\t max-height: 100%;
\t max-width: 100%;
\t object-fit: contain;
\t vertical-align: top;
}
.pageMap {
\t display: inline-block;
\t vertical-align: bottom;
}
@media (max-width: 768px) {
.pageRow {
display: inline-block;
\t white-space: normal;
}
.pageBlock {
display: inline-block;
\t width: 75%;
\t margin-bottom: 15px;
\t
}
.pageText {
\t display: inline-block;
\t position: relative;
\t vertical-align: middle;
\t align-items: center;
\t object-fit: contain;
text-align: center;
width: 100%;
}
.pageMap {
\t display: inline-block;
width: 100%;
}
}
--></style><div class="pageRow">
\t <div class="pageBlock">
\t \t <div class="pageText">
\t \t \t <p style="text-align: center;"><strong>Title 1</strong></p>
<p><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span></p>
\t \t </div><!--/.pageText-->
\t \t <div class="pageMap">
\t \t \t <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d55565170.29301636!2d-132.08532758867793!3d31.786060306224!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x54eab584e432360b%3A0x1c3bb99243deb742!2sUnited+States!5e0!3m2!1sen!2sus!4v1505170144549" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe>
\t \t </div><!--/.pageMap-->
\t </div><!--/.pageBlock-->
\t
\t <div class="pageBlock">
\t \t \t <div class="pageText">
\t \t \t \t <p style="text-align: center;"><strong>Title 2</strong></p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.</p>
\t \t \t </div><!--/.pageText-->
\t \t \t <div class="pageMap">
\t \t \t \t <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d55565170.29301636!2d-132.08532758867793!3d31.786060306224!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x54eab584e432360b%3A0x1c3bb99243deb742!2sUnited+States!5e0!3m2!1sen!2sus!4v1505170144549" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe></div>
\t \t \t </div><!--/.pageMap-->
\t \t </div><!--/.pageBlock-->
</div><!--/.pageRow-->
に私はあなたの両方が水平に整列させたい推測している、それを試してみてください。 –
は最大高さを使用します。 ！重要なのは、必要に応じて（それだけで）使用してください。オーバーフローを自動またはスクロールに設定するか、非表示にするか、必要に応じて調整してください。 –
修正する場合は高さを使用してください（パーセンテージまたはピクセル）。 https://jsfiddle.net/RachGal/29dc4L3L/ –