使用css/html显示文本框和列表相邻的列表

Question

嗨我试图得到像在图像中的布局，但我不能得到预期的布局。现在它的样子，如果我得到两个正确的盒子，另一个出错或者错过了另一个<div>，所以它是如何得到它的正确的。我知道这很容易，但无法正确获得css。

#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> 
 
     <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> 
 

Answer 1

这应该让你开始使用Flex盒。

我会给你留下填充和边距。 查看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

首先，你不必#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 3

看看： 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; 
} 

Answer 4

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; 
} 

希望有帮助！ :)