css - 两个 div 并排，没有容器

Question

我必须并排内联两个 div。问题是，我不能编辑 HTML，而且他们没有容器。为了让事情变得更复杂，第一个 div 需要比第二个更宽。而且我不知道如何做到这一点并使其响应。

这就是我目前所拥有的。但它没有反应。为此，我必须使用@media 对其进行编辑，而我确实在努力避免这种情况。有没有办法让这个更干净？一种我可以在没有容器的情况下使用 flex 的方法？并让它响应迅速，而不是让它在较小的设备上啮合在一起？

.one,
.two {
  float: left;
}

.one {
  width: 66.66%;
}

.two {
  width: 33.33%;
}

<div class="one">content goes here</div>
<div class="two">content goes here</div>

编辑: 这就是我的代码大纲，带有一个容器。只是为了让你们了解有关该问题的更多信息。带有类部分的 Div - 一个里面有 5 个元素，它们需要在调整窗口大小时保持内联和响应，所以我不想弄乱我目前拥有的代码，因为它在较小的屏幕上表现良好。

.container {}

.heading {
  text-align: center;
  margin-bottom: 35px;
}

.section-one {
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: space-between;
}

.item {
  position: relative;
  flex-shrink: 0;
  margin: 0 auto;
  margin-bottom: 15px;
}

.section-left {
  float: left;
  text-transform: uppercase;
  width: 66.66%;
  margin-top: 80px;
  padding-right: 80px;
}

.section-right {
  float: left;
  width: 33.33%;
}

<div class="container">
  <div class="heading">
    <h2>Lorem ipsum dolor</h2>
    <p>Morbi posuere mi condimentum dui suscipit vulputate. Donec lectus diam.</p>
  </div>
  <!--- /.heading -->
  <div class="section-one">
    <div class="item">Praesent eu elementum.</div>
    <div class="item">Praesent eu elementum.</div>
    <div class="item">Praesent eu elementum.</div>
    <div class="item">Praesent eu elementum.</div>
    <div class="item">Praesent eu elementum.</div>
  </div>
  <!--- /.section-one -->
  <div class="section-left">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sodales est. Nullam cursus id nibh mattis porta. Cras aliquet eros urna, quis imperdiet tortor placerat sed.
  </div>
  <!--- /.section-left -->
  <div class="section-right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sodales est. Nullam cursus id nibh mattis porta. Cras aliquet eros urna, quis imperdiet tortor placerat sed.
  </div>
  <!--- /.section-right -->
</div>

Answer 1

您可以使用 CSS calc() 函数 和 display:inline-block 而不是 float 来响应地对齐两个 div，而无需使用媒体查询。

但由于两个 div 都显示为 inline-block 并且在使用 inline-block 时它会在它的 block 周围添加 white-space 以删除我使用的 font-size:0 在 body 标签中，所以在你设计的剩余 block 上你必须手动分配 font-size 否则文本不会可见。

body{
  font-size:0;
  margin:0;
}
.one{
  display:inline-block;
  background:pink;
  width:calc(100vw - 40vw);
  font-size:16px;
}
.two{
  display:inline-block;
  background:pink;
  width:calc(100vw - 60vw);
  font-size:16px;
}

<div class="cont">
<div class="one">content goes here</div>
<div class="two">content goes here</div>
</div>