Question

所以我这里有这个HTML代码：

<div class="rdiv">
    <div class="title-left-right">Events</div>
    <div class="lr-div-text">

        <ul>
        <li style="padding-bottom: 15px;">
            <time datetime="2014-09-19" class="icon">
            <em>FRI</em>
            <strong>SEP</strong>
            <span>19</span>
            </time>
            <span>Some upcoming event.</span><br />
            <span>08:00 AM do 16:00</span>
        </li>

        <li>
            <time datetime="2014-09-29" class="icon">
            <em>MON</em>
            <strong>SEP</strong>
            <span>29</span>
            </time>
            <span>Some upcoming event.</span><br />
            <span>08:00 AM do 16:00</span>
        </li>
        </ul>
    </div>

</div>

CSS：

#right-content
{
    width: 245px;
    height: 100%;
    display: inline-block;
    background-color: white;
}

.rdiv
{
    width: 250px;
    height: 300px;
    /*border-bottom: 1px dotted black;*/
}

/*CALENDAR*/
time.icon
{
  font-size: 1em; /* change icon size */
  display: block;
  position: relative;
  width: 80px;
  height: 85px;
  background-color: #fff;
  border-radius: 0.6em;
  box-shadow: 0 1px 0 #bdbdbd, 0 2px 0 #fff, 0 3px 0 #bdbdbd, 0 4px 0 #fff, 0 5px 0 #bdbdbd, 0 0 0 1px #bdbdbd;
  overflow: hidden;
  left: -30px;
}

time.icon *
{
  display: block;
  width: 100%;
  font-size: 1em;
  font-weight: bold;
  font-style: normal;
  text-align: center;
}

time.icon strong
{
  position: absolute;
  top: 0;
  padding: 0.4em 0;
  color: #fff;
  background-color: #fd9f1b;
  border-bottom: 1px dashed #f37302;
  box-shadow: 0 2px 0 #fd9f1b;
}

time.icon em
{
  position: absolute;
  bottom: 0.3em;
  color: #fd9f1b;
}

time.icon span
{
  font-size: 2.5em;
  letter-spacing: -0.05em;
  padding-top: 0.8em;
  color: #2f2f2f;
}

我想创建这样的内容：http://prntscr.com/4eog06 到目前为止，我有这个：http://prntscr.com/4eog8n

我希望我的文字旁边是这个图标，内衬图标顶部。我试过漂浮但没有任何成功。有什么想法吗？

Answer 1

这是我能用你提供的代码得到的：

<强> HTML

 <ul>
    <li style="padding-bottom: 15px;">
        <time datetime="2014-09-19" class="icon">
        <em>FRI</em>
        <strong>SEP</strong>
        <span>19</span>
        </time>
        <span>Some upcoming event</span><br />
        <span>08:00 AM do 16:00</span>
    </li>
     <br />
    <li>
        <time datetime="2014-09-29" class="icon">
        <em>MON</em>
        <strong>SEP</strong>
        <span>29</span>
        </time>
        <span>Some upcoming event</span><br />
        <span>08:00 AM do 16:00</span>
    </li>
    </ul>
</div>

<强> CSS

#right-content
{
    width: 245px;
    height: 100%;
    display: inline-block;
    background-color: white;
}

li{
    list-style-type: none;
    clear: left;
    display:table-cell;
}

.rdiv
{
    width: 250px;
    height: 300px;
    /*border-bottom: 1px dotted black;*/
}

/*CALENDAR*/
time.icon
{
  font-size: 1em; /* change icon size */
  display: block;
  position: relative;
  width: 80px;
  height: 85px;
  background-color: #fff;
  border-radius: 0.6em;
  box-shadow: 0 1px 0 #bdbdbd, 0 2px 0 #fff, 0 3px 0 #bdbdbd, 0 4px 0 #fff, 0 5px 0 #bdbdbd, 0 0 0 1px #bdbdbd;
  overflow: hidden;
  left: -30px;
  float:left;
}

time.icon *
{
  display: block;
  width: 100%;
  font-size: 1em;
  font-weight: bold;
  font-style: normal;
  text-align: center;
}

time.icon strong
{
  position: absolute;
  top: 0;
  padding: 0.4em 0;
  color: #fff;
  background-color: #fd9f1b;
  border-bottom: 1px dashed #f37302;
  box-shadow: 0 2px 0 #fd9f1b;
}

time.icon em
{
  position: absolute;
  bottom: 0.3em;
  color: #fd9f1b;
}

time.icon span
{
  font-size: 2.5em;
  letter-spacing: -0.05em;
  padding-top: 0.8em;
  color: #2f2f2f;
}

fiddle

我希望它有所帮助。

Answer 2

我是这样做的。我添加了display：inline-block to li element并用div包装正确的网站内容以使其成为单个元素并添加了float：left for time element

 <div> 
 <ul>
    <li style="padding-bottom: 15px; display:inline-block">
        <time datetime="2014-09-19" class="icon" style="float:left">
        <em>FRI</em>
        <strong>SEP</strong>
        <span>19</span>
        </time>
        <div>
        <span>Some upcoming event</span><br />
        <span>08:00 AM do 16:00</span>
        </div>
    </li>

    <li>
        <time datetime="2014-09-29" class="icon" style="float:left">
        <em>MON</em>
        <strong>SEP</strong>
        <span>29</span>
        </time>
        <div>
        <span>Some upcoming event</span><br />
        <span>08:00 AM do 16:00</span>
        </div>
    </li>
    </ul>
</div>

<style type="text/css">
#right-content
{
   width: 245px;
   height: 100%;
   display: inline-block;
   background-color: white;
}

.rdiv
{
   width: 250px;
   height: 300px;
   /*border-bottom: 1px dotted black;*/
}

/*CALENDAR*/
time.icon
{
   font-size: 1em; /* change icon size */
   display: block;
   position: relative;
   width: 80px;
   height: 85px;
   background-color: #fff;
   border-radius: 0.6em;
   box-shadow: 0 1px 0 #bdbdbd, 0 2px 0 #fff, 0 3px 0 #bdbdbd, 0 4px 0 #fff, 0 5px 0   
   #bdbdbd, 0 0 0 1px #bdbdbd;
   overflow: hidden;
   left: -30px;
  }

 time.icon *
 {
  display: block;
  width: 100%;
  font-size: 1em;
  font-weight: bold;
  font-style: normal;
  text-align: center;
 }

 time.icon strong
{
  position: absolute;
 top: 0;
 padding: 0.4em 0;
 color: #fff;
 background-color: #fd9f1b;
 border-bottom: 1px dashed #f37302;
 box-shadow: 0 2px 0 #fd9f1b;
 }

 time.icon em
 {
  position: absolute;
  bottom: 0.3em;
  color: #fd9f1b;
 }

 time.icon span
{
 font-size: 2.5em;
 letter-spacing: -0.05em;
 padding-top: 0.8em;
 color: #2f2f2f;
}
</style>

图标和文字定位

2 个答案: