Дизайн карты MaterializeCSS

Я пытаюсь адаптировать Material Design на своем личном веб-сайте с помощью materializecss.com, однако фреймворк предоставляет только опции для исключения изображений поверх дизайна CARD.

Я хочу добиться чего-то, как показано ниже в ссылке [2-й ряд, 2-й столбец/последнее изображение], где изображение находится слева рядом с основным содержанием, интересно, может ли кто-нибудь помочь мне в этом, и я был бы очень признателен за вашу помощь в этом . Благодарность!

Пример дизайна карты


material-design web html css materialize
person vizFlux    schedule 28.08.2015    source источник

Ответы (2)


arrow_upward
2
arrow_downward

@vizFlux

Вот код, который вы хотите

.card-image {
  float: left;
  width: 40%;
  height: 250px;
}
.card-image img {
  height: 100%;
}
.right-content {
  width: 60%;
  float: left;
}
.card-title {
  padding-left: 20px;
}
<div class="card">
  <div class="card-image">
    <img src="images/sample-1.jpg" class="hoverZoomLink">
  </div>
  <div class="right-content">
    <span class="card-title">Card Title</span>
    <div class="card-content">
      <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.
      </p>
    </div>
    <div class="card-action">
      <a href="#">This is a link</a>
    </div>
  </div>
</div>

вывод должен выглядеть примерно так:

выходное изображение

person Ashish Sherashia    schedule 28.08.2015

arrow_upward
0
arrow_downward

Это должно помочь http://materializecss.com/cards.html

  <div class="row">
    <div class="col s12 m7">
      <div class="card">
        <div class="card-image">
          <img src="images/sample-1.jpg">
          <span class="card-title">Card Title</span>
        </div>
        <div class="card-content">
          <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
        </div>
      </div>
    </div>
  </div>
person Ashish Sherashia    schedule 28.08.2015
comment
Ашиш, я хотел бы извиниться за то, что недостаточно ясно выразился в своем вопросе. Я хотел бы добиться чего-то вроде 2-й строки, 2-го столбца, где изображение находится слева от содержимого. - person vizFlux; 28.08.2015