Question

我有一些css代码，它们使用类＆＃34; foo＆＃34;来定位对象。但是，它也影响其他元素。这是我的代码：

＆＃13;

#leftDiv {
  background-color: yellow;
  display: inline-block;
  height: 75vh;
  width: 20vw;
}

#centreDiv {
  background-color: blue;
  display: inline-block;
  height: 75vh;
  width: 31vw;
}

#rightDiv {
  background-color: red;
  display: inline-block;
  height: 75vh;
  width: 31vw;
}

.foo {
  margin-top: 71vh;
}

＆＃13;

<div id="division" class="holder">
    <div id="leftDiv" class="part">
      Welcome to this website!
    </div>
    <div id="centreDiv" class="part">
      <input type="text" class="foo" placeholder="Enter your message here...">
    </div>
    <div id="rightDiv" class="part">
      <input type="text" class="foo" placeholder="Enter your message here...">
    </div>
  </div>

＆＃13;

我使用margin-top的目的是将输入框对齐div的底部。所以，如果有更好的方法，我们将不胜感激。我只是无法弄清楚为什么leftDiv也会受到影响......

Answer 1

您可以使用 Flexbox 和定位：

来完成此操作

＆＃13;

<form:form method="post" modelAttribute="formDto">
    <form:input path="loginDto.userName"/>
    <form:input path="loginDto.password"/>
    <form:input path="infoDto.firstName"/>
    <form:input path="infoDto.lastName"/>
    <input type="submit" value="Add Employee"/>
</form:form>

＆＃13;

body {margin: 0}

#division {
  display: flex; /* displays flex-items (children) inline */
}

#leftDiv {
  background-color: yellow;
  height: 75vh;
  width: 20vw;
}

#centreDiv {
  background-color: blue;
  height: 75vh;
  width: 31vw;
}

#rightDiv {
  background-color: red;
  height: 75vh;
  width: 31vw;
}

/* added */

#centreDiv,
#rightDiv {
  position: relative;
}

.foo {
  position: absolute;
  bottom: 0;
  left: 0;
}

.textWrapper {
  overflow: auto;
  height: 100%;
  width: 100%;
}

＆＃13;

Answer 2

#leftDiv {
  background-color: yellow;
  display: block;
  height: 75vh;
  width: 20vw;
  float:left;
}

#centreDiv {
  background-color: blue;
  display: block;
  height: 75vh;
  width: 31vw;
  float:left;
}

#rightDiv {
  background-color: red;
  display:block;
  height: 75vh;
  width: 31vw;
  float:left;
}

.foo {
  margin-top: 71vh;
}

<div id="division" class="holder">
    <div id="leftDiv" class="part">
      Welcome to this website!
    </div>
    <div id="centreDiv" class="part">
      <input type="text" class="foo" placeholder="Enter your message here...">
    </div>
    <div id="rightDiv" class="part">
      <input type="text" class="foo" placeholder="Enter your message here...">
    </div>
  </div>

影响其他元素的类的CSS属性

2 个答案: