相关疑难解决方法(0)

在CSS中有什么方法可以创建它:

-----------------------------------
| lorem ipsum dolor | consectetur |
| sit amet          |             |
-----------------------------------
| adipiscing        | elit        |
-----------------------------------

由此:

<ul>
  <li>lorem ipsum dolor sit amet</li>
  <li>consectetur</li>
  <li>adipiscing</li>
  <li>elit</li>
</ul>

^{(元素的顺序并不重要)}

UPDATE

我需要'列'和它们最宽的'细胞'一样宽; 我需要'行'和最高的'细胞'一样高; 总之...一张桌子!没有"表头":所有单元格在同一级别上,分层次.

更新2

类似于:第一个虚拟行上的每个单元格(即行换行前的每个单元格)根据其内容填充所有可用空间; 随后的行由与第一行相同的每行单元数形成.每列仍然与其最宽的单元格一样宽,而不增加第一行建立的列数.

想想更多关于它的东西,那里的东西需要比桌面布局模块更多的魔法,这太开始了!

一张图片,说千言万语:

^{(你可以忽略'细胞'里面的无序列表)}

如何只用一个简单的HTML列表来实现它.在这一点上,我猜测的是:你不会 ; 但是让我们看看......

display: block我有一个带有( )的 DIV .out。

在此 DIV 中，有一个带有display: inline-flex( .row) 的 Flexbox，其中一列 ( .infos) 的静态宽度为 350 像素，另一列 ( .dynamic) 应根据内容具有动态宽度。

.row现在我遇到了外部 DIV ( ) 在全屏上增长的问题。那不是我的用例。我想要一个动态的外部 DIV。

请查看我的小提琴：https ://jsfiddle.net/2ymx9oog/

.out {
  border: 1px solid red;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
}
.row {
  display: inline-flex;
  flex-direction: row;
  padding: 10px;
  border: 1px solid yellow;
}
.infos {
  border: 1px solid green;
  flex-basis: 350px;
}
.dynamic {
  border: 1px solid blue; …

我试图让我的头围绕Flexbox只是我无法弄清楚一些事情.

我已经构建了一个左侧列为290px且右侧为"内容区域"的布局.

我希望内容区域是流畅的,并且都是100%的高度.我有点实现了这一点,但如果我用宽度为100vw的东西填充内容区域,它会将左列向下推.

.right_col {
  min-height: 792px;
  height: 100%;
  margin-left: 0px;
  background: #F7F7F7;
  display: flex;
  padding: 0 !important;
  width: 100%;
}
.callout-panel {
  background: #fff;
  width: 290px;
  float: none;
  clear: both;
  padding: 0 20px;
}
.input-group {
  position: relative;
  display: table;
  border-collapse: separate;
}
.input-group .form-control,
.input-group-addon,
.input-group-btn {
  display: table-cell;
}
.input-group .form-control {
  position: relative;
  z-index: 2;
  float: left;
  width: 100vw;
  margin-bottom: 0;
}

<div class="right_col">
  <div class="callout-panel">Left column</div>
  <section class="page-inner">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search">
      <span …

我正在开发一个React应用程序,它有一个带有一些Tabbed内容的模态,偶尔需要滚动.但是,问题是我无法设法滚动正确的内容.

模态分为3个主要部分:

1. 头
   • 应始终在模态的顶部可见
2. 内容
   • 应该填充页眉和页脚之间的空间,但不要强迫观看
3. 页脚
   • 应始终在内容下方可见
   • 这可能意味着在模态的底部(如果内容填充剩余空间)或在内容下面(如果内容 不填充空间)

虽然这很容易实现(我已经这样做了),但问题出现在内容不应该滚动,而是内部应该有的东西.在下面的图像中是两个预期行为的示例,一个具有长内容,应滚动而另一个不滚动.

我正在使用一个自定义Tabbed组件,它在容器内呈现内容.如果需要,此容器(下图中的白色)应滚动.

我可以在下面的CodePen和示例代码中找到最远的地方.我目前能够滚动包含预期可滚动内容的元素,但实际上无法滚动该内容.如果您检查笔,您可以看到它(由于某种原因)延伸超过包含元素.

代码示例

CodePen示例

HTML

<div class="modal">
  <div class="background" />
  <div class="modal_content">
    <div class="header">Random header</div>
    <div class="tabbed_content">
      <div class="tabs">
        <div class="tab active">Tab 1</div>
        <div class="tab">Tab 2</div>
      </div>
      <div class="content">
        <div class="scrollable">
          Tabbed Content
          <br /><br /><br /><br /><br /><br />
          Another Couple Lines
          <br /><br /><br /><br /><br /><br /> …

我正在尝试使用弹性盒制作一张也绝对定位的表格。每行都是一个标准 div，display: flex 每行中的每个项目都是弯曲项目。请注意，任何地方都没有设置宽度。

为什么我的背景颜色这么乱。

我注意到，如果行中有更多文本，背景会延伸得更远，并且位置是根据背景计算的，这很好，只是背景不包括整行。

尝试显示：inline-flex无济于事background-size: cover

https://jsfiddle.net/66f9s2kp/7/

<div style="z-index: 3; position: absolute; top: 50px; left: 50%; transform: translateX(-50%);">
    <div style="display: flex; background-color: rgb(173, 216, 230);">
        <div style="flex: 0 0 200px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: left; white-space: nowrap;">tesdfxt stuff</div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: 1px solid black; overflow: hidden; text-align: center; white-space: nowrap;">more</div>
        <div style="flex: 0 0 75px; font-family: monospace; background-color: transparent; border: …

我有一个里面有很长字符串的 flex 项目，我希望它被包裹起来。但它不起作用。

flex 1 1 500px例如，我设置了 ( flex-basis = 500px) 并且它应该用word wrap: break-word

但它没有，只有当我设置时width=500px，它才开始工作，所以问题是为什么flex-basis 500px不工作而宽度工作？

HTML：

<div class="map-detail-wrapper">
    <div class="ad-detail-text">
        <span>{{ad.text}}</span>
    </div>
</div>

CSS：

.map-detail-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.ad-detail-text {
    flex: 1 1 0%;
    width: 500px;
    line-height: 20px;
    font-size: 14px;
    margin: 20px;
    border: black;
    word-wrap: break-word;
    overflow: hidden;
}

我有 3 个块，我需要：

• 第一个块需要 200 像素宽并接触左侧。
• 第二个块位于第一个块之后，其右边缘恰好位于其容器宽度的 50% 处
• 第三个块将接管剩余的空间。

我在一些游戏引擎中做了类似的东西：

但是如何用css来实现呢？

我不想嵌套内部 div，因为它们扮演着相同的角色。

我尝试了这个但不起作用:(

* {
  box-sizing: border-box;
}

.wrapper {
  width: 100%;
  display: flex;
  position: relative;
}

.wrapper > * {
  height: 300px;
  display block;
}

.wrapper > *:nth-child(1) {
  background-color: salmon;
  width: 200px;
}

.wrapper > *:nth-child(2) {
  background-color: khaki;
  right: 50%;
}

.wrapper > *:nth-child(3) {
  background-color: violet;
  width: 50%;
}

<div class="wrapper">
  <pre>
    left: 0;
    width: 200px;
  </pre>
  <pre>
    left: 200px;
    right: 50%;
  </pre>
  <pre> …

我想在使用以下 CSS 代码时避免挤压元素，特别是对于Chrome 浏览器，ver. 39 .

此 CSS 代码在 Chrome 版本上运行良好。46. 但我需要使用旧版本，如谷歌浏览器 v.39。因为我使用这个版本作为包装器来创建桌面 PC 应用程序。

这是我想避免的挤压效果：

这里看起来不错：

#bascket {
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 52.9%;
  top: 14.72%;
  left: 0px;
  background: rgb(255, 255, 255);
  outline: none;
  cursor: -webkit-grab;
  display: flex;
  flex-direction: column-reverse;
  flex-grow: 1;
  flex-shrink: 1;
  justify-content: flex-start;
}

<div id="bascket">
  <div class="order-item">
    <div class="oi-p1">1</div>
    <div class="oi-p2">Item Name 1</div>
    <div class="oi-p3"></div>
    <div class="oi-p4">77</div>
  </div>
  <div class="order-item">
    <div class="oi-p1">1</div>
    <div class="oi-p2">Item Name 2</div>
    <div class="oi-p3"></div>
    <div class="oi-p4">77</div>
  </div>
  <div …

我有以下结构,我想了解为什么我的行不会随其内在内容而增长.

.row {
  border:solid red;
  display: flex;
  flex-direction: row;
}


.cell {
  border: solid green;
  flex: 0 0 400px;
}

<div class="row">
  <div class="cell">
   cell 1
  </div>
  <div class="cell">
   cell 2
  </div>
  <div class="cell">
   cell 3
  </div>
</div>

的jsfiddle

我不希望细胞生长或收缩,它们应该总是400px宽.父进程应该增长并溢出窗口,并且预计会出现水平滚动条.

在上面的示例中,红色边框应位于绿色边框周围.绿色边框具有预期尺寸,而不是红色边框.

出于与我的用例相关的可维护性原因,我不想为我的行设置静态宽度.

我对非flexbox解决方案持开放态度(参见内联块尝试),但会更喜欢一个flexbox(因为我需要align-items: center行上的行为)

我有一些为元素设置宽度的表格，因此某些列将至少具有容器宽度的某些百分比。

我想使用 flexbox 将此表格居中并为其设置最小宽度。

目标是让居中的表格具有一些最小宽度，某些列将具有相同的宽度（相同的比率）。

如果某些单元格的文本更长，那么我不在乎比例是否会中断（此列的宽度会比其他的大）。我只关心它对于常见情况（单元格中的少量文本数据）具有良好且相同的列宽

我能够想出适用于 Firefox 和 Chrome 的解决方案（链接）。

但是对于 Edge 和 IE11，表格会像不在 flex 容器display: flex;中一样拉伸（尝试对 Firefox 或 Chrome发表评论，结果就像在 Edge 上一样拉伸表格。

此外，看起来有时设置列有效（link2）。但我没有看到它在 Edge/IE11 中何时中断的模式。

这是我想要实现的更多生产示例（在 Chrome/Firefox 中工作，在 Edge/IE11 中拉伸）：“生产”表示例。

任何想法如何在 Edge/IE11 上实现我想要的？（我把我想达到的目标用粗体表示）。

这将是很好，如果我能继续使用Flexbox的容器（它可能需要在我的代码库更多的变化），但我想我会被罚款与删除style=width:p%的<col>，如果这是必要的。

flex-basis我想了解当没有为、width或属性设置显式值时min-width，flexbox 如何计算最终弹性项目的宽度。max-width换句话说，flexbox如何仅根据内容计算flex-item的宽度？

这是一个示例代码（可在codepen上找到）：

.container {
  display: flex;
  width: 600px;
}

.container div {
  outline: 1px dotted black;
}

<div class="container">
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga aspernatur suscipit aliquam beatae vitae harum, eius expedita quidem incidunt velit!</div>
  <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Error ad natus dolores harum, ex fuga voluptates dignissimos possimus saepe officia.</div>
</div>

在这个例子中，两个divs （flex-items）的计算宽度是相同的：（300px我用“inspect element”调试工具看到）。

现在，如果我向第一个 div 中的文本添加 …