テキストボックスを表示し、次に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

これは、フレックスボックスを使用し始める必要があります。

パディングと余白を残しておきます。 フレックスボックスの使用方法については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をメイン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; 
} 

希望がある！ :)