2

私はCSSベースの2列のレイアウトを持っています...

.mainContentSection {
  font-size: 1.1em;
  margin: 20px 10px 10px;
  padding: 0;
  -moz-column-count: 2; /* Firefox */
  -webkit-column-count: 2; /* Safari and Chrome */
  column-count: 2;
  -moz-column-gap:30px; /* Firefox */
  -webkit-column-gap:30px; /* Safari and Chrome */
  column-gap:30px;
}

.mainContentSection p {
  margin: 0 0 20px 0;
  padding: 0;
  border: 1px solid gray;
}

場合によっては、2 番目の列の上部が前の段落の下部からの余白をキャッチすることがあります。これにより、添付の写真に見られるように、次の段落の上部が押し下げられます。侵入、マージンの変更、インラインブロックを試しました。すべてがある程度の成功を収めていますが、最適ではありません。2 番目の列にアクセスしてその余白を削除できますか?

ここに画像の説明を入力

4

4 に答える 4

0

.mainContentSection要素の上マージンを使用しないでください。そのため、margin行は次のようになります。 margin: 0 10px 20px 10px;

.mainContentSection {
  font-size: 1.1em;
  margin: 0 10px 20px 10px;
  padding: 0;
  -moz-column-count: 2; /* Firefox */
  -webkit-column-count: 2; /* Safari and Chrome */
  column-count: 2;
  -moz-column-gap:30px; /* Firefox */
  -webkit-column-gap:30px; /* Safari and Chrome */
  column-gap:30px;
}
于 2015-11-18T00:39:42.027 に答える