两个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() function与display:inline-block代替float来响应两个div，而无需使用media query。

但由于两个div都显示为inline-block，并且当使用内联块时，它会在其块周围添加white-space，以删除我在font-size:0标记中使用body的内容，所以在设计中的剩余块上，您必须手动分配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>

Answer 2

我建议你无论如何都要使用媒体查询在小型设备上将你的div放在一起，特别是如果你有文本内容。我给你的最大宽度只是一个例子

@media screen and (max-width: 480px) {
    .one,
    .two {
        float: none;
        width: 100%;
    }
}

我很乐意为您推荐flex-box属性，但如果您没有容器并且无法修改HTML，那么这将很复杂。 无论如何，这是链接：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

使用flexbox，您只需将属性提供给容器：

.container {
    display: flex;
}

然后您可以选择要对元素进行排序的方式：

.container {
  flex-direction: row;
}

这是一个例子，请查看我给你的链接以获取更多信息。

Answer 3

鉴于你已经使用了Flexbox，我建议你也这样做，就像这样。

如果您不想要container，只需删除其标记并将其CSS属性移至body

Fiddle demo

Stack snippet

＆＃13;

＆＃13;

.container {
  display: flex;                  /*  added  */
  flex-wrap: wrap;                /*  added  */
}

.heading {
  flex: 0 0 100%;                 /*  added, behaves like a block  */
  text-align: center;
  margin-bottom: 35px;
}

.section-one {
  flex: 0 0 100%;                 /*  added, behaves like a block  */
  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 {
  flex: 1 0 66.666%;              /*  added, behaves like an inline-block but fill when on single line  */
  min-width: 400px;
  text-transform: uppercase;
  margin-top: 80px;
  padding-right: 80px;
  box-sizing: border-box;         /*  added, make padding be included in set width  */
  border: 1px dotted gray;        /*  demo purpose  */
}

.section-right {
  flex: 1 0 33.333%;              /*  added, behaves like an inline-block but fill when on single line  */
  min-width: 200px;
  box-sizing: border-box;         /*  added, make border be included in set width  */      
  border: 1px dotted gray;        /*  demo purpose  */
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

您需要重置box-sizing以将padding和border纳入宽度计算。

  

CSS box-sizing 属性用于更改用于计算元素宽度和高度的默认CSS框模型。

当盒子变得太小时，media query将有助于堆积它们。

  

媒体查询在您要根据设备的常规类型（例如打印与屏幕），特定特征（例如浏览器视口的宽度）应用CSS样式时非常有用，或者环境（如环境光线条件）。随着当今各种各样的互联网连接设备的出现，媒体查询是构建网站和应用程序的重要工具，这些网站和应用程序足够强大，可以在用户拥有的任何硬件上运行。

例如

.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; remove */
  padding-right: 80px;
}

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

/* updates */

  .section-left,
  .section-right {
    box-sizing:border-box;
  }

@media all and (max-width : 599px) {
  .section-left,
  .section-right {
    width:100%;
    padding:1em;
  }
}

/* let's see them */
div {
  box-shadow:0 0 0 2px green;
}

<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>