html - 有没有办法在不覆盖它们的情况下将 div 居中到列之间？

使用float和一些margin/ clear，使用已知大小，您可以在列 CSS 布局中管理它：

*{box-sizing:border-box;margin:0;}
 
article {
  column-count:2;
  height:500px;
  width:1200px;
  margin:auto;
  overflow:hidden;
  text-align:justify;
}
article header  {  
  float:right;
  width:300px;
  height:200px;
  padding:1em;
  margin-left:0.5em;
  margin-right:-160px;
  background:gray;
  text-align:center;
}
article:before {
  content:'';
  float:left;
  width:0;
  height:440px;
}
article > b  { 
  float:left;
  clear:left;
  height:200px;
  width:150px;
  float:left;
}
p {margin:0 1em 1em;}

<article>
  <header class="none">
      <h1>some title text to lay over here and see what we can do about it to set it in the middle</h1>
      <a href>Written by Lorem Hardy</a>
  </header>
  <b class="none"><!-- push it next col--></b>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</article>

但没用，因为它随时可能坏掉。

加载文档后，javascript 方法可以帮助检索所需的大小。使用var() 可以在 CSS 样式中轻松更新/重置和重用的 CSS，然后 class在通过 js 获取尺寸后删除，可以减少代码并提前准备。

window.onload = function() {
  let article = document.querySelector("article");
  let header = document.querySelector("article>header:first-of-type");
  let b = document.querySelector("article>b:first-of-type");
  let Hspacer = article.offsetHeight + "px";
  header.classList.toggle("none");/* let header take its style and width */
  let headerH = header.offsetHeight + "px";/* now how tall is it ? */
  article.style.setProperty("--Hspacer", Hspacer);
  article.style.setProperty("--headerH", headerH);
  b.classList.toggle("none");/* finalize the spacer standing in column 2 */
};

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  --Hspacer: ;
  /*to be updated via js */
  --headerH: ;
  /*to be updated via js */
  --headerW: 260px;
  /* init header 's width */
}

article {
  column-count: 2;
  height: var(--Hspacer);
  max-width: 900px;
  margin: auto;
  overflow: hidden;
  text-align: justify;
}

article header:not([class=none]) {
  float: right;
  width: var(--headerW);
  height: var(--headerH);
  padding: 1em;
  margin-left: 0.5em;
  margin-right: calc( ( var(--headerW) / 2)* -1);
  background: gray;
  text-align: center;
}

article:before {
  content: '';
  float: left;
  width: 0;
  height: var(--Hspacer);
}

article>b:not([class=none]) {
  float: left;
  clear: left;
  height: var(--headerH);
  width: calc( var(--headerW) / 2);
  float: left;
}

header h1 {
  margin-bottom: 0.75em;
}

p {
  margin: 1em;
}

<article>
  <header class="none">
    <h1>some title text to lay over here and see what we can do about it to set it in the middle</h1>
    <a href>Written by Lorem Hardy</a>
  </header>
  <b class="none"><!-- push it next col--></b>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
    lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
    facilisis luctus, metus</p>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
    lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
    facilisis luctus, metus</p>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
    lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
    facilisis luctus, metus</p>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
    lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
    facilisis luctus, metus</p>
</article>

灵感来自https://codepen.io/gc-nomade/pen/dyYzGYX

如果您的列容器部分流动，您可能需要更新--Hspacer值：https ://codepen.io/gc-nomade/pen/dypaydo

html - 有没有办法在不覆盖它们的情况下将 div 居中到列之间？

问题描述

解决方案

推荐阅读