在不改变父元素宽度的情况下替换一行上的两个 div

Question

我真的很难连续移动两个 div。

我尝试在行中显示 flex，但是当我这样做时，我的两个 div 的当前宽度保持不变，而我不想更改父元素的最终宽度。 我也尝试过内联显示，但它也不起作用......

我想将两个 div 放在同一行中的“statusDetails”类的 div 中，而不会干扰“status”类的 div 的当前宽度。

我们的目标是让这个屏幕的结尾类似：

任何帮助将不胜感激！

谢谢，

编辑：小提琴示例：

body {
  background-color: #edebe9;
}

.ddl-container .ddl-list {
  position: absolute;
  display: flex;
  flex-direction: column;
  border-left: 3px solid #3286d5;
  background-color: white;
  z-index: 1;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  text-transform: capitalize;
}

.horizontal-icon-menu .ddl-container>div {
  cursor: pointer;
  border: solid 3px transparent;
  font-size: 1.1rem;
}

.horizontal-icon-menu .ddl-container>div:hover {
  color: black;
}


/* .ddl-container:hover */

.horizontal-icon-menu .ddl-container .ddl-list {
  right: 0;
  border-left: 0px;
  background-color: white;
  z-index: 1;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  text-transform: capitalize;
}

.horizontal-icon-menu .ddl-container:hover>div {
  background-color: white;
}

.horizontal-icon-menu .ddl-container:hover .ddl-list div .changeColorOnHover:hover {
  background-color: #629924;
  color: white;
}

.solid-border-bottom {
  border-bottom: solid 1px #5e5e5e;
  padding: 0px !important;
}

.statusDetails {
  box-sizing: content-box;
}

.status div {
  padding: 0px !important;
}

.statusDetails div>span {
  text-transform: uppercase;
}

.statusDetails div span:last-of-type {
  text-transform: lowercase;
}

<main>
  <div class="horizontal-icon-menu">
    <div class="ddl-container">
      <div class="icon-param"><span class="username">ystalio</span></div>
      <div class="ddl-list">
        <div class="solid-border-bottom">
          <div class="changeColorOnHover">Profil</div>
          <div class="changeColorOnHover">Boîte de réception</div>
          <div class="changeColorOnHover">Préférences</div>
          <div class="changeColorOnHover">Déconnexion</div>
        </div>
        <div class="status">
          <div class="statusDetails">
            <div><span>ping </span><span id="ping">10</span><span> ms</span></div>
            <div><span>server </span><span id="server">0.1</span><span> ms</span></div>
          </div>
          <div class="signal">
            test
          </div>
        </div>
      </div>
    </div>
  </div>
</main>

Answer 1

由于您没有工作示例，我假设您只想让两个 div 并排对齐。

在这种情况下，我会建议你使用“Bootstrap Grid System”；

否则，对于普通的 html 和 css：

尝试添加 CSS：

.row {
  display: flex;
flex-wrap: wrap;
margin-right: -15px;
}
.col-sm-5 {
  flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}

和 HTML 类标记为：

<div class="status row">
  <div class="statusDetails col-sm-5">
    <div><span>ping </span><span id="ping">10</span><span> ms</span></div>
    <div><span>server </span><span id="server">0.1</span><span> ms</span></div>
  </div>
  <div class="signal col-sm-5">test</div>
</div>

见下面的片段：

body {
    background-color: #edebe9;
}
.row {
      display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
}
.col-sm-5 {
  flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}
.ddl-container .ddl-list{
  width: 300px;
    position: absolute;
    display: flex;
    flex-direction: column;
    border-left: 3px solid #3286d5;
    background-color: white;
    z-index: 1;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    text-transform: capitalize;
}

.horizontal-icon-menu .ddl-container > div {
    cursor: pointer;
    border: solid 3px transparent;
    font-size: 1.1rem;    
}

.horizontal-icon-menu .ddl-container > div:hover {
    color:black;
}

/* .ddl-container:hover */
.horizontal-icon-menu .ddl-container .ddl-list {
    right: 0;
    border-left: 0px;
    background-color: white;
    z-index: 1;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    text-transform: capitalize;
}

.horizontal-icon-menu .ddl-container:hover > div {
    background-color: white;
}
.horizontal-icon-menu .ddl-container:hover .ddl-list div .changeColorOnHover:hover {
    background-color: #629924;
    color: white;
}

.solid-border-bottom {
    border-bottom: solid 1px #5e5e5e;
    padding: 0px !important;
}

.statusDetails {
    box-sizing: content-box;
}

.status div {
    padding: 0px !important;
}

.statusDetails div > span {
    text-transform: uppercase;
}

.statusDetails div span:last-of-type {
    text-transform: lowercase;
}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <main>
        <div class="horizontal-icon-menu">
            <div class="ddl-container">
                <div class="icon-param"><span class="username">ystalio</span></div>
                <div class="ddl-list">
                    <div class="solid-border-bottom">
                        <div class="changeColorOnHover">Profil</div>
                        <div class="changeColorOnHover">Boîte de réception</div>
                        <div class="changeColorOnHover">Préférences</div>
                        <div class="changeColorOnHover">Déconnexion</div>
                    </div>
                    <div class="status row">
                        <div class="statusDetails col-sm-5">
                      <div><span>ping </span><span id="ping">10</span><span> ms</span></div>
                     <div><span>server </span><span id="server">0.1</span><span> ms</span></div>
                        </div>
                        <div class="signal col-sm-5">
                            test
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
</body>
</html>