我怎样才能创建一个图标和文本相同 div 像 table 格式

Question

我正在使用 Framework 7。我需要用这种格式创建一个 div。

我有一个高度为 80px x 80px 的图标，我可以这样使用它。

<i class="icon icon-clock-large"></i>

我完全不知道 css。我尝试使用列，但它们在小屏幕上会产生问题。我怎样才能做到这一点？

Answer 1

您可以为您的图标添加 float: left; 或为图标和文本元素添加 display:inline-block

Answer 2

更改文本的位置。

首先，我使用 display flex 使 .img 和 .text 内联。

然后只是为装订线添加了一点边距。

根据您的需要设置文本样式。

.container {
  background: #262223;
  display: flex;
  align-items: center;
  padding: 30px 20px;
  width: 250px;
}

.img {
  height: 80px;
  width: 80px;
  background: #09cd68;
}

.text {
  margin-left: 10px;
}

.text p {
  color: #09cd68;
  font-family: sans-serif;
  margin: 0;
}

.text p:first-child {
  font-size: 16px;
}



.text p:last-child {
  font-size: 24px;
  text-transform: uppercase;
  margin-top: 4px;
}

<div class="container">
  <div class="img"></div>
  <div class="text">
    <p>please wait</p>
    <p>Processing</p>
  </div>
</div>

Answer 3

使用下面的代码

.container {
                padding: 10px;
                width: 200px;
                color: #09cd68;
                background: #262223;
                display: block;
                font-family: verdana;
                height: 50px;
            }

            .left{
                float:left;  
            }

            .clr{
                clear:both;  
            }

            .loadingtext{
                width: 140px;
                margin: 4px 0px 0px 15px;
            }
            .pleasewait{
                font-size:13px;
            }
            .processing{
                text-transform:uppercase;
                font-size:20px;
            }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="container">
  <div class="left">
    <i class="fa fa-clock-o fa-3x"></i>
  </div>
  <div class="left loadingtext">
    <div class="pleasewait">Please wait<div>
      <div class="processing">PROCESSING</div>
  </div>
  <div class="clr"></div>
</div>

我怎样才能创建一个图标和文本相同 div 像 table 格式

How can I create an icon and text in same div like table format

html

css

html-framework-7