文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在同一行上对齐跨越元素

问如何在同一行上对齐跨越元素
EN

Stack Overflow用户

提问于 2022-01-09 15:53:39

回答 3查看 605关注 0票数 1

我想用css构建一个简单的web应用程序，但是我遇到了一个问题。下面是我所需要的结构的基本概念

我希望元素2和元素3在同一行上，但是元素3将不会停留在元素2的同一行上，如果我强迫它使用内联块停留在该行上，它不会占用页面的全部宽度。

我怎样才能使元素符合这种方式？我不想使用绝对的定位，但我看不出有什么办法使这件事成功。

@font-face {
  font-family: Assistant;
  src: local("Assistant"), local("Assistant-Bold"), url(assets/Assistant.ttf);
  font-weight: bold;
}

:root {
  --m-body-bg-color: teal;
  --m-font: Assistant;
  --m-font-fg: whitesmoke;
  --m-main-fg: crimson;
  --m-gaps-px: 10px;
  --m-container-radius: 10px;
}

body {
  background-color: var(--m-body-bg-color);
  position: relative;
  width: 100%;
  height: 100%;
}

.m-container {
  position: relative;
  margin: var(--m-gaps-px);
  border-radius: var(--m-container-radius);
  width: 100%;
  height: 100%;
  border: 2px solid var(--m-main-fg);
  background-color: var(--m-main-fg);
  display: inline-block;
}
.no-span {
  width: fit-content !important;
}
#page-container {
  height: 100%;
  width: calc(100% - var(--m-gaps-px) * 4);
}
#page-container {
  margin: var(--m-gaps-px);
}

<html lang="en-us">
  <body>
    <div id="page-container">
      <div class="m-container" id="element-1">
      </div>
      <div class="m-container no-span" id="element-2">
        theres some content here that i want to fit
      </div>
      <div class="m-container" id="element-3">
      </div>
      <div class="m-container" id="element-4">
      </div>
    </div>
  </body>
</html>

css

回答 3

Stack Overflow用户

发布于 2022-01-09 15:55:55

有趣的是，也许你可以试试：

display:flex;

对于这两个元素

票数 1

Stack Overflow用户

发布于 2022-01-09 16:27:33

使用网格。试一试：

.container {
  display: grid;
  grid-template-columns: 6(1fr);
  grid-gap: 10px;
}

.item {
  background-color: green;
  padding: 30px;
  border: solid red;
  text-align: center;
  vertical-align: middle;
  font-size: 20px;
}

.item1 {
  grid-column: 1 / 7;
}

.item2 {
  grid-row: 2 / 4;
}

.item3,
.item4 {
  grid-column: 2 / 7;
}

<div class="container">
  <div class="item item1">element1</div>
  <div class="item item2">element2</div>
  <div class="item item3">element3</div>
  <div class="item item4">element4</div>
</div>

虽然网格是一种更好的方法，但也是与flex类似的一种方式：

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  background-color: green;
  padding: 30px;
  border: solid red;
  text-align: center;
  vertical-align: middle;
  font-size: 20px;
}

.item1 {
  width: 100%;
}

.item2 {
  width: 15%;
  margin-top: 10px;
  margin-right: 1%;
  word-wrap: break-word;/*for code snippet. no need for wide pages. */
  padding: 20px;/*for code snippet. no need for wide pages. */
}

.flex {
  width: 84%;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  border: solid yellow;
}

.item4 {
  margin-top: 10px;
}

<div class="container">
  <div class="item item1">element1</div>
  <div class="item item2">element2</div>
  <div class="flex">
    <div class="item">element3</div>
    <div class="item item4">element4</div>
  </div>
</div>

票数 1

Stack Overflow用户

发布于 2022-01-09 16:04:57

我建议你学习CSS网格。它在W3Schools上有一个非常好的、组织良好的文档。它将真正帮助您解决这些小问题，即使在未来，并创造更大的项目在未来。现在，(例如，如果您现在没有太多的时间去学习)，您可以创建一个表，然后将元素添加到表中并对它们进行排列。但是，如果您期待在web上发布此页面，则不建议这样做，因为对于搜索引擎优化来说，它是不合适的。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70643005

复制

相似问题

问如何在同一行上对齐跨越元素
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在同一行上对齐跨越元素EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在同一行上对齐跨越元素
EN