Question

我想在div内水平对齐2 div。

这是codepen链接Check Here。当我向左边div添加margin-top时，它没有向上移动。

我做错了什么？

<footer id="contact">           
    <div class="reservation" style="display: block;border:1px solid red; "> 
        <div class="reserve-address-div" style="display: inline-block;width:45%;border:1px solid red;margin-top:-40px;">        

            <h4>51 Area, Barmuda Triangle, Mars</h4>
            <h4>0165466546</h4>
            <h4>vivek.tarun17@gmail.com</h4>        

        </div>
        <div class="reserve-booking-div" style="display: inline-block; width:45%;border:1px solid red; ">                       
            <form>
                <input type="text"  name="name" placeholder="Name" /><br>           
                <input type="email" name="email" placeholder="Email"/><br>
                <input type="text"  name="subject" placeholder="Subject"/><br>
                <textarea placeholder="message" rows="5"></textarea><br>
                <input type="button" value="Submit">
            </form>     
        </div>  
    </div>
</footer>

Answer 1

请尝试使用vertical-align: top这样的内容：

<div class="reservation">   
    <div class="reserve-address-div" style="display: inline-block; ... vertical-align:top">     
        ...
    </div>
    <div class="reserve-booking-div" style="display: inline-block; ... vertical-align:top"> 
        ...

vertical-align属性很有用。

您可以将内联块与父元素的顶部放在一起，例如div。

Answer 2

Flexbox 解决方案如何：

#!/bin/bash 
for i in $1 $2 $3 $4; do 
if [[("$i" == '-f')]] ; then #I'm searching if the user input the -f switch 
if [ -f "$((i+1))" ]; then # I'm trying to increment the position of $i to get the input that follows the -f switch and check the existence of the file 
echo "$((i+1)) file found" 
else 
echo "$((i+!)) file not found" 
fi 
fi 
done

.reservation {
  display: flex;
  padding: 2.5px;
  border: 1px solid red;
}

.reserve-address-div, .reserve-booking-div {
  flex: 1;
  margin: 2.5px;
  padding: 5px;
  border: 1px solid red;
}

根据您的需要调整<footer id="contact"> <div class="reservation"> <div class="reserve-address-div"> <h4>51 Area, Barmuda Triangle, Mars</h4> <h4>0165466546</h4> <h4>vivek.tarun17@gmail.com</h4> </div> <div class="reserve-booking-div"> <form> <input type="text" name="name" placeholder="Name"><br> <input type="email" name="email" placeholder="Email"><br> <input type="text" name="subject" placeholder="Subject"><br> <textarea placeholder="message" rows="5"></textarea><br> <input type="button" value="Submit"> </form> </div> </div> </footer>和margin。

Answer 3

推送.reserve-address-div的原因是因为默认vertical-align值设置为baseline。正如另一张海报所提到的，将vertical-align属性设置为top .reserve-address-div将删除该div上方的空格。

您可以详细了解该问题here。

另一种解决方案是在flexbox容器上使用.reservation，正如我在下面的代码段中所示。

希望这有帮助！

.reservation {
  border: 1px solid red;
  display: flex;
  align-content: center;
  justify-content: center;
  width: 100%;
}

.reserve-address-div {
  display: inline-block;
  width: 45%;
  border: 1px solid red;
}

.reserve-booking-div {
  display: inline-block;
  width: 45%;
  border: 1px solid red;
}

<footer id="contact">
  <div class="reservation">
    <div class="reserve-address-div">

      <h4>51 Area, Barmuda Triangle, Mars</h4>
      <h4>0165466546</h4>
      <h4>vivek.tarun17@gmail.com</h4>

    </div>
    <div class="reserve-booking-div">
      <form>
        <input type="text" name="name" placeholder="Name" /><br>
        <input type="email" name="email" placeholder="Email" /><br>
        <input type="text" name="subject" placeholder="Subject" /><br>
        <textarea placeholder="message" rows="5"></textarea><br>
        <input type="button" value="Submit">
      </form>
    </div>
  </div>
</footer>

为什么div不是水平对齐的

3 个答案: