无法在反应中对齐父 div 内的 div答案

【问题标题】：Not able to align divs' inside a parent div in react无法在反应中对齐父 div 内的 div
【发布时间】：2022-02-10 16:13:57
【问题描述】：

这是图片。我想从顶部对齐 div（带有蓝色边框）。我只想要这个的CSS代码。我尝试使用边距，但它不起作用。此外，当在这些 div 中插入更多内容时，它们会从下到上扩展，看起来这些 div 的底部是固定的。

我想要的是内部 div（带有蓝色边框）应该是顶部对齐而不是底部对齐，当在这些 div 中添加更多文本时，它应该从上到下扩展。

这里是 CSS 代码。 propertiesContainer 类是带有红色边框的父 div，properties 类是内部 div 的

propertiesContainer: {
  paddingTop: "26px",
  background: " #EAEAFA",
  border: "1px solid red",
  opacity: 1,
},
properties: {
  bottom: "100px",
  margin: "19px",
  width: "auto",
  border: "2px solid blue",
  height: "262px",
},

Reactjs 代码

<section className={classes.propertiesContainer}>
  <HorizontalScroll
    itemClass="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
    data={
      mobile_footer_data &&
      mobile_footer_data.map((data, index) => {
        const { header, body } = data;
        console.log("dataa", data);

        const text = body.map((item, index) => {
          return <div key={index}>{item}</div>;
        });

        return (
          <div key={index} className={classes.properties}>
            <CommonHeaderText
              text={<span>{header}</span>}
              variant="h1"
              style={{
                fontSize: "16px",
                fontWeight: "bold",
                fontFamily: "Open Sans",
                color: "##363636",
                height: "19px",
                marginBottom: "25px",
              }}
            />

            <div>{text}</div>
          </div>
        );
      })
    }
  />
</section>;

【问题讨论】：

尝试学习flexbox，它会帮助你将div对齐到你想要的地方
也分享您的 HTML
基本上我为此使用了 CSS 网格。但问题依然存在
添加了代码@AhsanKhan
在你的代码中你没有使用网格系统...请给我们minimal reproducible example

标签： javascript html css reactjs

【解决方案1】：

对于内联元素，vertical-align 的默认值为baseline。因此，它们是文本基线对齐的。尝试将此应用于子 div：

vertical-align: top;

        .outter {
            outline: 2px dashed #387779;
            padding: 10px;
        }

        .inner {
            width: 100px;
            height: 80px;
            display: inline-block;
            background-color: #a3af92;
            color: #26310a;
        }
        .vtop {
            vertical-align: top;
        }

    <div class="outter">
        <div class="inner">hello<br/>world<br/>abc</div>
        <div class="inner">abcd<br/>two</div>
        <div class="inner">123</div>
    </div>
    <br/>
    <div class="outter">
        <div class="inner vtop">hello<br/>world<br/>abc</div>
        <div class="inner vtop">abcd<br/>two</div>
        <div class="inner">123</div>
    </div>

【讨论】：

【解决方案2】：

假设你的父 div 有 className "parent" 它有两个孩子“child1”和“child2” 所以css看起来像这样

.parent{
   display:flex;
   justify-content:space-between;
   align-items:flex-start;
}

尝试将此应用于父 div，希望这能解决您的问题。

【讨论】：

我在使用网格，我不能使用 flex
能不能做个沙箱，发个链接……好让我更了解
对不起，我不能这样做，但谢谢