Как оформить текст, похожий на визитку?

Question

Мне нужно спроектировать нечто похожее на визитку следующим образом:

My Businesses
Logo  AAA                                              Logo  BBB
      93939393                                               87878787
      10 sample road, city                                   15 new lane, city
We are the best, contact us for more information.      This is another business
We are always here to help.                            It is always here to help.
                                         Link1                                Link2

Other entries go the same.

Как вы можете видеть, у него есть логотип, который является изображением, затем перед ним идет название компании, следующая строка - телефон, адрес следующей строки, а следующие строки - описание бизнеса. В конце последняя строка представляет собой ссылку на сайт бизнеса.

Код

    .test {
      clear: both;
      display: block;
      margin: 10px auto;
      width: 90%;
      height: 100%;
      max-width: 1400px;
      overflow-y: auto;
    }
    .test ul li {
      display: block;
      float: left;
      height: 240px;
      width: 24%;
      text-align: center;
      border: 1px solid orange;
      border-radius: 5px;
      padding: 8px;
      margin: 4px;
      position: relative;
    }

<div class="test">
<h2>My Businesses</h2>
  <ul>
    <li>
      <img src="" width="100" height="100" />
      <p>AAA
        <br/>93939393
        <br/>10 sample road, city
        <br/>We are the best, contact us for more information. We are always here to help.</br>
        Link1</p>
    </li>
    <li>
      <img src="" width="100" height="100" />
      <p>BBB
        <br/>87878787
        <br/>15 new lane, city
        <br/>This is another business It is always here to help.</br>
        Link2</p>
    </li>
    <li>
      <img src="" width="100" height="100" />
      <p>CCC
        <br/>12121212
        <br/>34 alex avenue, city
        <br/>This is the third business. They are also there to help.</br>
        Link3</p>
    </li>
  </ul>
</div>

Текущий код сделал это так

    .test {
      clear: both;
      display: block;
      margin: 10px auto;
      width: 90%;
      height: 100%;
      max-width: 1400px;
      overflow-y: auto;
    }
    .test ul li {
      display: block;
      float: left;
      height: 240px;
      width: 24%;
      text-align: center;
      border: 1px solid orange;
      border-radius: 5px;
      padding: 8px;
      margin: 4px;
      position: relative;
    }

<div class="test">
<h2>My Businesses</h2>
  <ul>
    <li>
      <img src="" width="100" height="100" />
      <p>AAA
        <br/>93939393
        <br/>10 sample road, city
        <br/>We are the best, contact us for more information. We are always here to help.</br>
        Link1</p>
    </li>
    <li>
      <img src="" width="100" height="100" />
      <p>BBB
        <br/>87878787
        <br/>15 new lane, city
        <br/>This is another business It is always here to help.</br>
        Link2</p>
    </li>
    <li>
      <img src="" width="100" height="100" />
      <p>CCC
        <br/>12121212
        <br/>34 alex avenue, city
        <br/>This is the third business. They are also there to help.</br>
        Link3</p>
    </li>
  </ul>
</div>

        Logo  
         AAA
         93939393
    10 sample road, city We are the best, contact us 
   for more information.We are always here to help.
          Link

Answer 1

демоверсия jsBin

Вот новый образец необходимой разметки HTML внутри вашего элемента LI:

<p>
    <img src="//placehold.it/100x100&text=LOGO" width="100" height="100"/>
    AAA<br/>
    93939393<br/>
    10 sample road, city
</p>
<p>
    We are the best, contact us for more information.
    We are always here to help.</br>
    Link1
</p>

CSS:

*{ margin:0; padding:0; } /* GUR Global Ugly Reset */

.test ul {
  text-align:center;
}

.test ul li{
  text-align:left;
  list-style:none;
  display:inline-block;
  vertical-align:top;
  width: 24%;
  border: 1px solid orange ;
  border-radius: 5px;
  padding: 8px;
  margin: 4px;
}

.test li p{overflow: hidden; margin: 10px;}
.test p + p{clear: both;}
.test li p img{float: left; margin-right:10px;}