divでテーブルレイアウトをスタイルする方法

Question

私は左の列として機能するために、下の両方のdivの画像を取得しようとしていますが、付随するテキストは同じ列の両方で右の列として機能します。

各行には他の画像とテキストが付いていなければなりません。シャッフルのどこかで、私のdivsが混ざっているし、彼らは正常に動作していません。私は右のコンテナ内に留まるためにテキストが必要です。私は何が欠けていますか？

.toplinks { 
 
    width: 300px; 
 
    padding: 20px; 
 
    overflow: hidden; 
 
} 
 

 
.icon { 
 
    width: 30%; 
 
    float: left; 
 
} 
 

 
.hlbox { 
 
    width: 300px; 
 
    border: 1px solid; 
 
    border-radius: 9px 9px 9px 9px; 
 
    border-color: #999999; 
 
    background-image: url(http://ejgh.org/templates/ejgh/images/HLHeader.png), url(http://ejgh.org/templates/ejgh/images/healthyLifestyles_bottom.gif); 
 
    background-size: 100% auto; 
 
    background-repeat: no-repeat; 
 
    background-position: top, bottom; 
 
    padding: 100px 20px 25px; 
 
    overflow: hidden; 
 
} 
 

 
.HLrow { 
 
    display: block; 
 
    border: 1px solid; 
 
    border-color: green; 
 
    width: 100%; 
 
} 
 

 
.HLicon { 
 
    width: 30%; 
 
    border: 1px solid; 
 
    border-color: red; 
 
    display: table-cell; 
 
    float: left; 
 
    height: inherit; 
 
} 
 

 
.HLtext { 
 
    width: inherit; 
 
    border: 1px solid; 
 
    border-color: purple; 
 
    
 
}

<div class="toplinks"> 
 
     <div class="rTableRow"> 
 
      <div class="icon"><a href="http://ejgh.org/health-finder/find-a-physician"><img src="http://ejgh.org/images/stories/homepage/findphysicianicon.jpg" alt="Find a Physician Icon" /></a></div> 
 
      <div class="text"> 
 
      <h3>Find a Physician</h3> 
 
      <hr />Let us help you pick a doctor that fits your needs</div> 
 
      </div> 
 
     <div class="rTableRow"> 
 
      <div class="icon"><a href="http://ejgh.org/patients-visitors/bills-a-insurance/pay-my-bill"><img src="http://ejgh.org/images/stories/homepage/paymybillicon.jpg" alt="Pay my Bill Icon" /></a></div> 
 
      <div class="text"> 
 
      <h3>Pay My Bill</h3> 
 
      <hr />Conveniently pay your EJGH bill</div> 
 
      </div> 
 
     <div class="rTableRow"> 
 
      <div class="icon"><a href="http://myejgh.org"><img src="http://ejgh.org/images/stories/homepage/myejghicon.jpg" alt="myEJGH.Org Icon" /></a></div> 
 
      <div class="text"> 
 
      <h3>My EJGH.Org</h3> 
 
      <hr />See your up-to-date medical information</div> 
 
      </div> 
 
     <div class="rTableRow"> 
 
      <div class="icon"><a href="edoc" target="_blank"><img src="http://ejgh.org/images/stories/homepage/edocicon.jpg" alt="eDoc icon" width="75" /></a></div> 
 
      <div class="text"> 
 
      <h3>eDoc</h3> 
 
      <hr />$49 Doctor visits via smartphone or online</div> 
 
      </div> 
 
     <div class="rTableRow"> 
 
      <div class="icon"><a href="https://ejmd.ejgh.org/" target="_blank"><img src="http://ejgh.org/images/stories/homepage/mdportalicon.jpg" alt="" width="75" /></a></div> 
 
      <div class="text"> 
 
      <h3>EJGH MD Portal</h3> 
 
      <hr />Physician login for portal access</div> 
 
      </div> 
 
     </div> 
 
<p></p> 
 
<!--Start HL Table--> 
 
<div class="hlbox"> 
 
    <div class="HLrow"> 
 
    <div class="HLicon"><a href="http://ejgh.org/your-health/healthy-lifestyles/become-a-member-sp-1672965733"><img src="http://ejgh.org/templates/ejgh/images/hl_memberbutton.png" alt="Image of Apple and Weights for homepage" width="100%"/></a></div> 
 
    <div class="HLtext"> 
 
    <h3>Become a Member</h3> 
 
    <hr /> 
 
    <p>Join Healthy Lifestyles and enjoy the benefits of membership.</p> 
 
    </div> 
 
    </div> 
 
    <div class="HLrow"> 
 
    <div class="HLicon"><a href="/component/wrapper/?Itemid=203"><img src="http://ejgh.org/templates/ejgh/images/hl_communitybutton.png" alt="Image of elderly couple at hospital in New Orleans Louisiana" width="100%" /></a></div> 
 
    <div class="HLtext"> 
 
    <h3>Community Events</h3> 
 
    <hr /> 
 
    <p>Learn more about the classes, events, support groups, and health screenings we offer.</p> 
 
    </div> 
 
    </div> 
 
    <div class="HLrow"> 
 
    <div class="HLicon"><a href="/component/hwdvideoshare/?task=viewcategory&amp;Itemid=166&amp;cat_id=5"><img src="http://ejgh.org/templates/ejgh/images/hl_tvbutton.png" alt="Image of Liz Delsa Healthy Lifestyles Host" width="100%" /></a></div> 
 
    <div class="HLtext"> 
 
    <h3>Watch TV Segments</h3> 
 
    <hr /> 
 
    <p>Watch Healthy Lifestyles TV segments as seen on WWL-TV.</p> 
 
    </div> 
 
    </div> 
 
    <div class="HLrow"> 
 
    <div class="HLicon"><a href="/your-health/healthy-lifestyles/healthy-lifestyles-magazine"><img src="http://ejgh.org/templates/ejgh/images/hl_magbutton.png" alt="Summer 2016 Healthy Lifestyles Cover" width="100%" /></a></div> 
 
    <div class="HLtext"> 
 
    <h3>Read the Magazine</h3> 
 
    <hr /> 
 
    <p>Read the latest Healthy Lifestyles Magazine as included in the Times-Picayune newspaper.</p> 
 
    </div> 
 
<!--End HL Table--> 
 
</div></div> 
 
<!--End Box Div—>

また、HLdiv周りのボックスが離れて行くことができます - 私はどこ引っ張っているものには目を取得しようとするこれらを使用していました。

もう一度おねがいします。

Answer 1

私が正しく理解していれば、display: table-cell;をHLtextクラスに追加するだけです。