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.

正如您所看到它有一个图像徽标，然后是商业名称，下一行是电话，下一行地址和以下行是业务描述。最后，最后一行是指向该公司网站的链接。

代码

＆＃13;

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

＆＃13;

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

＆＃13;

当前代码就像这样

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

1 个答案: