イメージと2行のテキスト行を整列する

Question

イメージを最初に表示し、2行後に表示するようにこのdivを整列しようとしていますが、プロンプトにそって整列させるように見えます。

#overview { 
 
    width: 350px; 
 
    height: 500px; 
 

 

 
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
 
    
 
} 
 

 
#overview #header-collapse { 
 
    height: 50px; 
 
    width: 100%; 
 
    background-color: #ff8217; 
 
    color: #fff; 
 
    font-size: 15px; 
 
    line-height: 50px; 
 
    white-space: nowrap; 
 
    -moz-border-radius: 0px; 
 
    -webkit-border-radius: 3px 3px 0px 0px; 
 
    border-radius: 3px 3px 0px 0px; 
 
    text-align: center; 
 
    
 
    
 
    
 
} 
 

 
#overview #body-list { 
 
    background: #fff; 
 
    height:450px; 
 
    overflow-y: auto; 
 
    width: 100%; 
 
    
 
    border-radius: 0px 0px 3px 3px; 
 
    -webkit-border-radius: 0px 0px 3px 3px; 
 
    border-radius: 0px 0px 3px 3px; 
 
} 
 

 
#overview #body-list a { 
 
    text-decoration:none; 
 
} 
 

 
.list-item:hover { 
 
    background-color: rgba(82, 82, 82, .1); 
 
} 
 
    
 

 

 

 
.list-item { 
 
    border-bottom: 1px solid rgba(82, 82, 82, .2); 
 
    height: 80px; 
 
    width: 100%; 
 
    padding-left: 10px; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    position: relative; 
 
} 
 

 

 
.list-item p { 
 
    margin: 0px; 
 
} 
 
.list-item #header-title { 
 
    color: #954500; 
 
    font-size: 20px; 
 
    font-weight: 400; 
 

 
} 
 

 
.list-item #subtitle { 
 
    color: rgb(82, 82, 82); 
 
    opacity: 0.6; 
 
    font-size: 13px; 
 

 
} 
 

 
.list-item #list-image { 
 
    height: 60px; 
 
    width: 60px; 
 
    background-color: #000; 
 
    -webkit-border-radius: 30px; 
 
    -moz-border-radius: 30px; 
 
    border-radius: 30px; 
 
}

<div id="overview"> 
 
    <div id="header-collapse"> 
 
     <h4> 
 
     Oversigt 
 
     </h4> 
 
    </div> 
 
    <div id="body-list"> 
 
    <a href="#"> 
 
     <div class="list-item"> 
 
     <div id="list-image"></div> 
 
      <p id="header-title">Title</p> 
 
      <p id="subtitle">Subtitle</p> 
 
     </div> 
 
     </a> 
 
     
 
    </div> 
 

 

 
</div>

Answer 1

最も簡単、最も近代的な方法を作業するflexboxを使用することです。

この方法では、イメージサークルとテキストが両方とも垂直にセンタリングされるため、後で心配する必要はありません。

header-titleとsubtitleをdivの内部に配置します。

<div class="list-titles"> 
    <p id="header-title">Title</p> 
    <p id="subtitle">Subtitle</p> 
</div> 

次に、あなたの.list-itemクラスに次の行を追加します。

.list-item { 
    display: flex; 
    align-items: center; 
} 

を（それが良いのxDを見えるように、私はまた、あなたのイメージにmargin-right: 10px;を追加しました）

ここでは、作業JSFiddle

Answer 2

ラップ新しいDIVで2本のタイトルは、このように、インラインブロックとして、新しいDIVや画像のDIVを定義します（あなたは余白を微調整する必要があります距離用）

#overview { 
 
    width: 350px; 
 
    height: 500px; 
 

 

 
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
 
    
 
} 
 

 
#overview #header-collapse { 
 
    height: 50px; 
 
    width: 100%; 
 
    background-color: #ff8217; 
 
    color: #fff; 
 
    font-size: 15px; 
 
    line-height: 50px; 
 
    white-space: nowrap; 
 
    -moz-border-radius: 0px; 
 
    -webkit-border-radius: 3px 3px 0px 0px; 
 
    border-radius: 3px 3px 0px 0px; 
 
    text-align: center; 
 
    
 
    
 
    
 
} 
 

 
#overview #body-list { 
 
    background: #fff; 
 
    height:450px; 
 
    overflow-y: auto; 
 
    width: 100%; 
 
    
 
    border-radius: 0px 0px 3px 3px; 
 
    -webkit-border-radius: 0px 0px 3px 3px; 
 
    border-radius: 0px 0px 3px 3px; 
 
} 
 

 
#overview #body-list a { 
 
    text-decoration:none; 
 
} 
 

 
.list-item:hover { 
 
    background-color: rgba(82, 82, 82, .1); 
 
} 
 
    
 

 

 

 
.list-item { 
 
    border-bottom: 1px solid rgba(82, 82, 82, .2); 
 
    height: 80px; 
 
    width: 100%; 
 
    padding-left: 10px; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    position: relative; 
 
} 
 

 

 
.list-item p { 
 
    margin: 0px; 
 
} 
 
.list-item #header-title { 
 
    color: #954500; 
 
    font-size: 20px; 
 
    font-weight: 400; 
 

 
} 
 

 
.list-item #subtitle { 
 
    color: rgb(82, 82, 82); 
 
    opacity: 0.6; 
 
    font-size: 13px; 
 

 
} 
 

 
.list-item #list-image { 
 
    height: 60px; 
 
    width: 60px; 
 
    background-color: #000; 
 
    -webkit-border-radius: 30px; 
 
    -moz-border-radius: 30px; 
 
    border-radius: 30px; 
 
} 
 
#list-image, #title-wrapper { 
 
    display: inline-block; 
 
}

<div id="overview"> 
 
    <div id="header-collapse"> 
 
     <h4> 
 
     Oversigt 
 
     </h4> 
 
    </div> 
 
    <div id="body-list"> 
 
    <a href="#"> 
 
     <div class="list-item"> 
 
     <div id="list-image"></div> 
 
      <div id="title-wrapper"> 
 
      <p id="header-title">Title</p> 
 
      <p id="subtitle">Subtitle</p> 
 
      </div> 
 
     </div> 
 
     </a> 
 
     
 
    </div> 
 

 

 
</div>

Answer 3

float:leftを追加します。その部門に

.list-item #list-image {float:left;} 

はJSFIDDLE