使用css / html显示文本框并相互列出

Question

嗨我试图得到图像中的布局，但我无法得到预期的布局。现在就好了，如果我得到两个盒子正确，另一个出错或者错误放在另一个<div> ，那怎么做才对。我知道这很简单但无法正确获得CSS。

＆＃13;

＆＃13;

  #first {
      border: 1px solid black;
      box-sizing: border-box;
      width: 300px; 
      float:left;
      height:300px; 
      margin:20px
  }


  #second {
      width: 100px; 
      float:left; 
      height:100px;
      margin:20px
  }

  #third {
      width: 600px;
      float: left;
      height: 100px;
      border: 10px;
  }

＆＃13;

<div>
        <div>
          <div id="first">
                <ul>
                  <li>Apple</li>
                  <li>Orange</li>
                  <li>Lime</li>
                </ul>
            </div>
            <label> DESCRIPTION</label>
            <div id="second">
                <br />
                <textarea rows="4" cols="50"> Description</textarea>
                <br />
                <button onClick={this.buttonClick.bind(this)} > submit</button>
            </div>
        </div>
        <br />
        <div>
         <ul>
           <li>Daisy</li>
           <li>Jasmine</li>
           <li>Rose</li>
         </ul> 
        </div>
    </div>
 

＆＃13;

＆＃13;

＆＃13;

Answer 1

这可以让你开始使用弹性盒子。

我会留下填充和边距让你搞清楚。 查看https://www.w3schools.com/css/css3_flexbox.asp以了解如何使用弹性框。

.border {
  border: 1px solid black;
}

.div1 {
  width: 200px;
  display: inline-block;
}

.div2 {
  flex: 1 0;
}

button {
  float: right;
  width: 100px;
}

.outer {
  height: 400px;
  display: flex;
}

.inner {
  width: 400px;
  display: flex;
  flex-direction: column;
}

<div class="outer">
  <div class="div1 border"></div>
  <div class="inner">
    <div class="div2 border"></div>
    <div>
      <button>Click</button>
    </div>
    <div class="div2 border"></div>
  </div>
</div>

Answer 2

HTML

<div class="container">
  <div class="left">

  </div>
  <div class="right">
    <div class="div1">

    </div>
    <div class="div2">
      <button>
      hello
      </button>
    </div>
    <div class="div3"></div>
  </div>
</div>

CSS

.container {
  width: 100%;
  height: 100%;
}

.right{
   width: 60%;
   margin: 15px;
   height: 500px;
   background-color: lightgray;
   float:left;
}
.left{
   width: 30%;
   margin: 15px;
   height: 500px;
   background-color: lightyellow;
   float:left;
}

.div1{
  height: 40%;
  width: auto;
  border: 1px solid black;
  margin: 5px;
}
.div2{
  height: 10%;
  border: 1px solid black;
  width: auto;
  margin: 5px;
}
.div3{
    height: 40%;
  width: auto;
  border: 1px solid black;
  margin: 5px;
}

希望有所帮助！ ：）

Answer 3

首先，你没有#third div id。 其次，您可以将所有div放入Main div并从那里开始工作。

  #Main{..}


  #first {
      border: 1px solid black;
      box-sizing: border-box;
      width: 300px; 
      float:left;
      height:300px; 
      margin:20px
  }


  #second {
      width: 100px; 
      float:left; 
      height:100px;
      margin:20px
  }

  #third {
      width: 600px;
      float: left;
      height: 100px;
      border: 10px;
  }

        <div id="Main">
          <div id="first">
                <ul>
                  <li>Apple</li>
                  <li>Orange</li>
                  <li>Lime</li>
                </ul>
            </div>
            <label> DESCRIPTION</label>
            <div id="second">
                <br />
                <textarea rows="4" cols="50"> Description</textarea>
                <br />
                <button onClick={this.buttonClick.bind(this)} > submit</button>
            </div>
        </div>
        <br />
        <div id="Third">
         <ul>
           <li>Daisy</li>
           <li>Jasmine</li>
           <li>Rose</li>
         </ul> 
        </div>
    </div>
 

Answer 4

看看： https://jsfiddle.net/r8r5Ldq3/

<div>
  <div id="first">
    <ul>
      <li>Apple</li>
      <li>Orange</li>
      <li>Lime</li>
    </ul>
  </div>
  <div id="test">
    <label> DESCRIPTION</label>
    <div id="second">
      <br />
      <textarea rows="4" cols="50"> Description</textarea>
      <br />
      <button onClick={this.buttonClick.bind(this)}> submit</button>
    </div>
    <div id="third">
      <ul>
        <li>Daisy</li>
        <li>Jasmine</li>
        <li>Rose</li>
      </ul>
    </div>
  </div>

</div>
 #first {
   border: 1px solid black;
   box-sizing: border-box;
   width: 300px;
   float: left;
   height: 300px;
   margin: 20px
 }

 #second {
   width: 100px;
 }

 #third {
   border: 10px;
 }

 #test {
   float: left;
 }