CSS 浮动不推动相邻元素

Question

我正在尝试使用 React 和 vanila css 制作类似时间轴的对象。我设计的内容如下所示：

方框每行组成一个组件，所以横跨两个方框，中间有一个圆形标记为一组。我只是使用 flex 将它们排成一行，并在右侧文本框的包装器 div 上使用 border-left 来制作一条垂直线。

问题出在那个圆形标记上。我最初的想法是，如果我对右侧文本框使用 ::before 伪选择器，那么该标记将挂在右侧文本框旁边。我试过的代码如下：

const Container = styled.div`
  width: 100vw;
  display: flex;
`

const Wrapper = styled.div`
  width: 50vw;
`

const WrapperWithLine = styled.div`
  width: 50vw;
  border-left: 7px solid grey;
`

const Textbox = styled.div`

`

const TextboxWithMarker = styled.div`
  margin: 0 0 0 1vw;
  &::before {
    content: "";
    background-color: #ffffff;
    background-size: cover;

    width: 35px;
    height: 35px;
    border: 1px solid #000000;

    position: relative;
    left: 1vw;
    float: left;
  }
`

const Component = (props) => {
  return (
    <Container>
      <Wrapper>
        <Textbox>
          Lorem Ipsum...
        <Textbox>
      </Wrapper>
      <WrapperWithLine>
        <TextboxWithMarker>
          Lorem Ipsum...
        <TextboxWithMarker>
      </WrapperWithLine>
    </Container>
  )
}

我得到的是标记对象推动相邻元素。所以我尝试使用 float: right; 和 right: 50vw; 以便它在其他元素上确实 "float" ，看起来没问题，但它不会一直放在该行的右中间。

有没有更好的方法来做这样的设计？我认为这种布局在前端经常使用。

Answer 1

没有在 React 中全部设置，我使用 HTML & CSS 粗略地重新创建了这个设置。

我按照我的方式在结构周围移动。我创建了一个 div 来容纳这条线，所以它是它自己的元素，对我来说这让事情变得更容易处理。 ::before 和 ::after 在主要依赖于它所连接的元素时可以使用。但对我来说，这条线同时受到左右文本框的影响，所以它应该有自己的容器。同样通过这种方式，使用 ::before 将圆圈绑定到直线上，这更有意义。

.container {
  width: 100vw;
  display: flex;
}

.wrapper {
  width: 50vw;  
}

.textbox {
  text-align: center;
  border: 2px solid #000;
  margin: 1rem 1rem;
  padding: 1rem;
}

.line {
  width: 4px;
  background-color: #000;
  position: relative;
}

.line:after {
  content:"";
  position: absolute;
  width: 16px;
  height: 16px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  background: green;
  transform: translateX(-50%) translateY(-50%); 
}

<div class="container">
  <div class="wrapper">
    <div class="textbox">Lorem Ipsum</div>
  </div>
  <div class="line"></div>
  <div class="wrapper">
    <div class="textbox">Lorem Ipsum</div>
  </div>
</div>
<div class="container">
  <div class="wrapper">
    <div class="textbox">Lorem Ipsum</div>
  </div>
  <div class="line"></div>
  <div class="wrapper">
    <div class="textbox">Lorem Ipsum</div>
  </div>
</div>
<div class="container">
  <div class="wrapper">
    <div class="textbox">Lorem Ipsum</div>
  </div>
  <div class="line"></div>
  <div class="wrapper">
    <div class="textbox">Lorem Ipsum</div>
  </div>
</div>

CSS 浮动不推动相邻元素

CSS float not pushing the adjacent element

css

css-position

css-float