CSS - таблица стилей

Question

CSS - таблица стилей

0

Мне нужно сделать что-то вроде этого:

Я не уверен на 100%, как сделать это, поэтому я решаю за таблицу, которая может быть полезной, но это просто ужасный разброс, что я сделал, моя попытка выглядит так:

    <table>
      <tr>
          <td rowspan="2" class="img-position"><a href="#"><img src="images/foto.png"></a></td>
          <td class="topic-name"><a href="#">Název topicu nebo článku </a></td>
          <td class="date">28.8.2014 / 19:30</td>
      </tr>
    </table>

Мой CSS:

#sub-content .left{
    width: 326px;
    height: 145px;
    display: inline-block;
    float:left;        
}

#sub-content img{
    width: 122px;
    height: 121px;
    display: inline-block;
    margin-top: 0px;
    margin-left: 5px;        
}

#sub-content .topic-name{
    width: 150px;
    height: 14px;
    line-height 14px;
    margin-bottom: 130px;
    margin-left: 10px;
    display: inline-block;
    vertical-align: top;
    text-decoration: underline;
    font-weight: 14px;         
}

#sub-content table{
    width:326px;
    height:145px;         
}

#sub-content tr{
    margin: 10px 0px 0px 0px;
    padding: 0px;
    height: 36px;         
}

#sub-content .date{            
}

#sub-content .img-position{
    margin: 0px;
    padding: 0px;
    width: 122px;
    height: 121px;
    display: inline-block;         
}

И я не могу перейти от своей позиции к стилю по крайней мере одной из этой части, а затем просто скопировать ее 3 раза. Надеюсь, я найду здесь кого-нибудь, кто может помочь мне исправить это.

Предварительный просмотр в прямом эфире можно найти на: http://funedit.com/andurit/try1/

Спасибо, что прочитали мой пост

user258459 14 апр. 2014, в 12:32

Источник

7

Чтобы сделать что-то подобное, нужно много тренироваться в тренажерном зале ...
apomene 14 апр. 2014, в 10:22
0

Так что порекомендуйте мне, как мне это сделать :)
user258459 14 апр. 2014, в 10:28

Теги:

html

css

3 ответа

0

Используйте загрузочные сетки для достижения табличного стиля. Это отзывчиво и легко реализовать. Включите этот файл CSS.

<div class='row'>
       <div class='col-xs-4 tab'> <!-- 1/3rd size of the parent container -->
        <div class='row'>
          <!-- Image box -->
          <div class='col-xs-4'> 
            <a href="#"><img src="images/foto.png"></a> 
          </div>
          <!-- Description box -->
          <div class='col-xs-8'> <!-- 2/3rd size of parent container -->
           <div><a href="#">Název topicu nebo článku </a></div>
           <div>28.8.2014 / 19:30</div>
           <div>Lorem Ipsum</div>
         </div>
       </div>
     </div>

   <div class='col-xs-4 tab'> <!-- 1/3rd size of the parent container -->
    <div class='row'>
      <!-- Image box -->
      <!-- ...  Follow same structure as above-->
   </div>
  </div>

   <div class='col-xs-4 tab'> <!-- 1/3rd size of the parent container -->
    <div class='row'>
      <!-- ... Follow same structure as above -->
   </div>
  </div>
</div>

Это даст вам 3 столбца в строке равной ширины. Для фиксированной высоты каждой вкладки просто укажите

<style>
.tab{
  height: 200px;
}
</style>

Подробности реализации см. Здесь.

anurag 14 апр. 2014, в 09:12

0

Делать это в таблицах NON Semantic и я не рекомендую. По моему мнению, вам нужно использовать эту структуру

Html

<div class="block1">block1</div>
        <div class="block2">block2</div>
        <div class="block3">block3</div>
    </div>
* {
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
    width: 100%;
}
.wrapper{
    width: 100%;
    background: #ddd;
}
.block1{
    float: left;
    width: 33.3%;
    background: #c01;
    height: 200px;
    margin-right: 1px;
}
.block2{
    float: left;
    width: 33.3%;
    background: #c01;
    height: 200px;
    margin-right: 1px;
}
.block3{
    float: left;
    width: 33.3%;
    background: #c01;
    height: 200px;
}

AlexPrinceton 14 апр. 2014, в 08:53

0

в этом случае с использованием таблиц не работает желаемый эффект достигнут
AlexPrinceton 14 апр. 2014, в 10:39

Ещё вопросы

Чтобы сделать что-то подобное, нужно много тренироваться в тренажерном зале ...
Так что порекомендуйте мне, как мне это сделать :)
в этом случае с использованием таблиц не работает желаемый эффект достигнут

scx · Accepted Answer · 2014-04-14T08-57-00.000Z

Прежде всего, я рекомендую вам прочитать следующее: почему бы не использовать таблицы для размещения в HTML? о том, как вы не должны создавать свой макет.

Я подготовил вам основной пример jsfiddle с вашим материалом, чтобы заставить вас быстрее нагонять вещи. Проверь это. Пример макета

Я изменил ваш макет на divs и spans, и он будет выглядеть примерно так:

<div class='article-container'>
  <div class='article'>  
  <div class="img-position">
    <a href="#"><img src="http://funedit.com/andurit/try1/images/foto.png"/></a> 
  </div>
  <span class="topic-name"><a href="#">Název topicu nebo článku </a></span>
  <span class="date">28.8.2014 / 19:30</span>
  </div>
  .
  . 
  .
</div>