相关疑难解决方法(0)

如何使用CSS <div>在另一个内部水平居中<div>？

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

我想使用弹性框垂直对齐一些内容,<li>但没有取得很大的成功.

我已经在网上查了一下,很多教程实际上都使用了一个包装div来获取align-items:center父对象的flex设置,但是我想知道是否可以删除这个额外的元素？

我选择在此实例中使用弹性框,因为列表项高度将是动态%.

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
}

ul {
  height: 100%;
}

li {
  display: flex;
  justify-content: center;
  align-self: center;
  background: silver;
  width: 100%;
  height: 20%;
}

<ul>
  <li>This is the text</li>
</ul>

正如您在下面的代码中看到的那样,Flex容器内的左侧div伸展以满足右侧div的高度.是否有一个属性,我可以设置使其高度保持其内容所需的最小值(如height: autoFlex容器外的常用div)？

#a {
  display: flex;
}
#a > div {
  background-color: red;
  padding: 5px;
  margin: 2px;
}
#b {
  height: auto;
}

<div id="a">
  <div id="b">left</div>
  <div>right<br>right<br>right<br>right<br>right<br></div>
</div>

我在容器内有两个元素,它们通过使用弹性盒并排放置.在第二个元素(.flexbox-2)上,我在CSS中设置它的高度.但是,第一个元素(.flexbox-1)将匹配高度.flexbox-2.我如何停止.flexbox-1匹配高度.flexbox-2,而只是保持其自然高度？

这是我到目前为止(也可用作jsFiddle)

.container {
  display: -webkit-flex;
  -webkit-flex-direction: row;
}
.flexbox-1 {
  -webkit-flex: 1;
  border: solid 3px red;
}
.flexbox-2 {
  -webkit-flex: 2;
  border: solid 3px blue;
  height: 200px;
  margin-left: 10px;
}

<div class="container">
  <div class="flexbox-1">.flexbox-1</div>
  <div class="flexbox-2">.flexbox-2</div>
</div>

在CSS中,我可以这样做:

但我不知道如何将其改为:

这可能与CSS有关吗？

如果是,我怎么能在没有明确指定高度的情况下做到(让内容增长)？

#container {
  display:flex;
  height:300px;
  background:#333;
}
#child1 {
  width:30%;
  background:#3cf;
}
#child2 {
  width:30%;
  background:#3fc;
}
#child3 {
  width:40%;
  background:#cf3;
}
#child1_child {
  width:100%;
  background:#fc3;
}
pre {
  margin:0px;
}

    <div id="container">
    <div id="child1"><div id="child1_child"><pre>CONTENT<BR>CONTENT<BR>CONTENT<BR>CONTENT</pre></div></div>
    <div id="child2"></div>
    <div id="child3"></div>
    </div>

高度#child1自动设置为相同的高度#container,如何使其适合#child1_child而不是100%的高度#container？

高度#child1_child不是静态的,它可以通过其内部的内容来改变,#child1具有静态值的高度是无用的.

我在创建一个flexbox响应网格时遇到了问题,并希望有人可以指出我正确的方向.

我希望所有的.blockdiv都是相同的高度,并且.bottomdiv绝对位于底部.这实际上是在当前的解决方案中工作,但是当h2标题太长并且达到2 h2行时,我希望行的所有标题都是相同的高度.

这有可能吗？

我做了一个Codepen来说明问题:http://codepen.io/kenvdbroek/pen/eZKdEQ

h1,
h2,
h3 {
  margin: 0;
}
body {
  margin: 0;
  padding: 0;
}
ul.clean-list {
  margin: 0;
  padding: 0;
}
ul.clean-list li {
  list-style: none;
  margin-bottom: 5px;
}
li:last-child {
  margin-bottom: 0;
}
.container {
  padding-top: 50px;
}
.block {
  margin-bottom: 30px;
  border: 1px solid red;
}
.block > .bottom {
  border: 1px solid blue;
}
@media only screen and (min-width: 480px) { …

我基本上想要的是使每个子元素的高度包装其内容.

这是我的代码:

<style>

.parent{
        display: flex;
    }

.child{

    padding: 5px;
    margin: 10px;
    background: green;
    height: auto;
}   

</style>

<div class="parent">

    <div class="child">child1</div>
    <div class="child">child2</div>
    <div class="child">child3</div>
    <div class="child" style="height:50px">child1</div>

</div>

输出:

预期产量:

我想在我的css表中使用百分比.不幸的是,它对我不起作用.

这段代码出了什么问题？我应该使用flexbox而不是table吗？

我想用表,因为我想要相同的高度列.

ul {
  list-style: none;
  margin: 0;
  display: table;
  table-layout: fixed;
  width: 100%;
}

li {
  width: 50%;
  display: table-cell;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

澄清

目前我正在使用这个包https://github.com/satya164/react-native-tab-view，但我也尝试过这个来自反应导航https://reactnavigation.org/docs/material-top-tab -navigator/并有同样的问题。

基本上我试图删除默认的 flexbox 行为“等高列”

介绍

我正在实现一个具有三个场景的选项卡视图。第一个将是一个带有无尽和分页平面列表的屏幕（其高度未确定），其他两个有自己的视图，高度确定。

问题

当第一个标签的内容被渲染时，它的高度是好的，但是当另一个标签被渲染并且它的高度大于第一个时，它（第一个标签）将其高度更改为另一个标签的高度。

第一个选项卡可以有 +100000 个项目，但假设目前它只有 1 个大小为 30px 的项目。第二个选项卡的高度不可变，为 40 像素，最后一个为 50 像素。

使用我当前的代码，会发生以下情况：

紫色空间不应该出现！！

代码

由于代码较长，我在相关部分注释了“<--------”。

export default function Tab(props) {
  const [index, setIndex] = useState(0);
  const [tab1Height, setTab1Height] = useState(null);
  const [tab2Height, setTab2Height] = useState(null);


  const [routes] = useState([
    { key: "tab0", title: "Tab0" },
    { key: "tab1", title: "Tab1" },
    { key: "tab2", title: "Tab2" },
  ]);

  const handleTabHeights …