ul popoverクラスをそれぞれのセクションに揃えるにはどうすればよいですか？

それぞれのセクションのPopoverクラスを作成しようとしていますが、必要に応じて対称的に配置されていません。ul popoverクラスをそれぞれのセクションに揃えるにはどうすればよいですか？

私はそれが次のようになりたい：ここhttps://www.screencast.com/t/DrbkBj36M

は私のCSS/HTMLです。ヘルプは非常に高く評価されます。

.filters { 
 
    display: inline-flex; 
 
    flex-direction: row; 
 
    align-items: center; 
 
    justify-content: flex-end; 
 
    text-align: right; 
 
    min-height: 70px; 
 
    max-height: 70px; 
 
    width: 100%; 
 
    border: 1px solid #DDDDDD; 
 
    border-radius: 4px; 
 
    padding: 10px; 
 
    padding-right: 30px; 
 
} 
 

 
.locations { 
 
    border-right: #DDDDDD solid 1px; 
 
} 
 

 
.locations, .amenities { 
 
    height: 100%; 
 
    padding-left: 30px; 
 
    flex-grow: 1; 
 
    text-align: left; 
 
} 
 

 
h3 { 
 
    font-weight: 600; 
 
    line-height: .6; 
 
} 
 

 
h4 { 
 
    font-weight: 400; 
 
    font-size: 14px; 
 
    line-height: .6; 
 
} 
 

 
button { 
 
    border:none; 
 
    border-radius: 4px; 
 
    width: 20%; 
 
    height: 48px; 
 
    font-size: 18px; 
 
    background-color: #FF5A5F; 
 
    color: white; 
 
    margin: 0 30px 0 auto; 
 
} 
 

 
button:hover { 
 
    opacity: 0.9; 
 
} 
 

 
.popover { 
 
    position: absolute; 
 
    display: none; 
 
    width: inherit; 
 
    font-size: 16px; 
 
    background-color:#FAFAFA; 
 
    border: #DDDDDD 1px solid; 
 
    border-radius: 4px; 
 
    padding: 0 30px 30px 30px; 
 
    margin: 0; 
 
} 
 

 

 
.locations:hover .popover { 
 
    display: block; 
 
} 
 

 
.amenities:hover .popover { 
 
    display: block; 
 
    padding-top: 30px; 
 
}

<!DOCTYPE html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title></title> 
 
    <link rel="stylesheet" type="text/css" href="4-common.css" media="all"> 
 
    <link rel="stylesheet" type="text/css" href="6-filters.css" media="all"> 
 
    <link rel="icon" type="image/x-icon" href="images/favicon.ico" sizes="16x16"> 
 
    </head> 
 
    <body> 
 
    <header> 
 
    </header> 
 

 
    <div class="container"> 
 
     <section class="filters"> 
 
     <div class="locations"> 
 
     <h3>States</h3> 
 
     <h4>California, New York...</h4> 
 
     <ul class="popover"> 
 
      <h2>California</h2> 
 
      <li>Berkeley</li> 
 
      <li>Los Angeles</li> 
 
      <li>San Francisco</li> 
 
      <h2>New York</h2> 
 
      <li>New York</li> 
 
     </ul> 
 
     </div> 
 
     <div class="amenities"> 
 
     <h3>Amenities</h3> 
 
     <h4>Internet, kitchen...</h4> 
 
     <ul class="popover"> 
 
      <h2>Amenities</h2> 
 
      <li>Fiber internets</li> 
 
      <li>Big stove</li> 
 
      <li>Cryogenic chamber</li> 
 
     </ul> 
 
     </div> 
 
     <button>Search</button> 
 
     </section> 
 
    </div> 
 
    </body> 
 
</html>

出典

2017-02-16 jimmytt

え...これは何をしたいのですか？

.filters { 
 
    display: inline-flex; 
 
    flex-direction: row; 
 
    align-items: center; 
 
    justify-content: flex-end; 
 
    text-align: right; 
 
    height: 70px; 
 
    width: 100%; 
 
    border: 1px solid #DDDDDD; 
 
    border-radius: 4px; 
 
    padding-right: 30px; 
 
} 
 

 
.locations { 
 
    border-right: #DDDDDD solid 1px; 
 
} 
 

 
.locations, .amenities { 
 
    height: 100%; 
 
    padding-left: 30px; 
 
    flex-grow: 1; 
 
    text-align: left; 
 
    position: relative; 
 
} 
 

 
h3 { 
 
    font-weight: 600; 
 
    line-height: .6; 
 
} 
 

 
h4 { 
 
    font-weight: 400; 
 
    font-size: 14px; 
 
    line-height: .6; 
 
} 
 

 
button { 
 
    border:none; 
 
    border-radius: 4px; 
 
    width: 20%; 
 
    height: 48px; 
 
    font-size: 18px; 
 
    background-color: #FF5A5F; 
 
    color: white; 
 
    margin: 0 30px 0 auto; 
 
} 
 

 
button:hover { 
 
    opacity: 0.9; 
 
} 
 

 
.popover { 
 
    position: absolute; 
 
    top: 100%; 
 
    right: 0; 
 
    bottom: auto; 
 
    left: 0; 
 
    display: none; 
 
    width: inherit; 
 
    font-size: 16px; 
 
    background-color:#FAFAFA; 
 
    border: #DDDDDD 1px solid; 
 
    border-radius: 4px; 
 
    padding: 0 30px 30px 30px; 
 
    margin-top: 1px; 
 
    margin-left: -1px; 
 
} 
 
.amenities .popover 
 
{ 
 
    margin-left: -2px; 
 
} 
 

 

 
.locations:hover .popover { 
 
    display: block; 
 
} 
 

 
.amenities:hover .popover { 
 
    display: block; 
 
    padding-top: 30px; 
 
}

<!DOCTYPE html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title></title> 
 
    <link rel="stylesheet" type="text/css" href="4-common.css" media="all"> 
 
    <link rel="stylesheet" type="text/css" href="6-filters.css" media="all"> 
 
    <link rel="icon" type="image/x-icon" href="images/favicon.ico" sizes="16x16"> 
 
    </head> 
 
    <body> 
 
    <header> 
 
    </header> 
 

 
    <div class="container"> 
 
     <section class="filters"> 
 
     <div class="locations"> 
 
     <h3>States</h3> 
 
     <h4>California, New York...</h4> 
 
     <ul class="popover"> 
 
      <h2>California</h2> 
 
      <li>Berkeley</li> 
 
      <li>Los Angeles</li> 
 
      <li>San Francisco</li> 
 
      <h2>New York</h2> 
 
      <li>New York</li> 
 
     </ul> 
 
     </div> 
 
     <div class="amenities"> 
 
     <h3>Amenities</h3> 
 
     <h4>Internet, kitchen...</h4> 
 
     <ul class="popover"> 
 
      <h2>Amenities</h2> 
 
      <li>Fiber internets</li> 
 
      <li>Big stove</li> 
 
      <li>Cryogenic chamber</li> 
 
     </ul> 
 
     </div> 
 
     <button>Search</button> 
 
     </section> 
 
    </div> 
 
    </body> 
 
</html>

出典

2017-02-16 18:32:44 user6003859

おっと！驚くばかり。ほぼ@ user6003859です。私はポップオーバーをdiv全体の外側の端に合わせ、下に移動したいので、それぞれの "States"と "Amenities" divの拡張のように見えます。 – jimmytt

まあ、ハウボーダー – user6003859

スーパースーパークローズ@ user6003859です。分割線で「アメニティ」を整列させ、両方を1ピクセルのように動かす方法を理解する必要があります。 – jimmytt

ul popoverクラスをそれぞれのセクションに揃えるにはどうすればよいですか？

答えて

関連する問題