css - 如何设置类似于名片的文字样式？

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.

如您所见，它有一个 Logo ，即图像，然后在其前面是公司名称，下一行是电话，下一行是地址，接下来的几行是对公司的描述。最后，最后一行是指向企业网站的链接。

代码

    .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 demo

这是 LI 元素中所需 HTML 标记的新示例:

<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;}