无法在＆＃34;内联＆＃34;中找到元素。形成

Question

我正在尝试为类完成一个项目，但是，我无法找到项目设计规范中显示的元素。 ＆＃34; .right＆＃34;中的所有内容class应该与＆＃34; .left＆＃34;类元素。你能帮帮我吗？如何编写CSS规则以使输出看起来像图片中那样？

  <div class="left">
    <img src="C:\colmar\information-main.jpg"/>
    <div class="text">
      <h2>It doesn`t hurt to keep practicing</h2>
      <p>"Curabitur vitae libero in ipsum portitor consequat. Aliquam et commodo lectus, <br/> nec consequat neque. Sed non accumsan uma. Phasellus sed consequat ex. Etiam <br/> eget magna laoreet, eficitur dolor consequat, tristique ligula."</p>
      <span>Emanuel, Sr Strategist at Hiring.com</span>
    </div>
  </div>

  <div class="right">
    <div class="orientation">
      <img src="C:\colmar\information-orientation.jpg"/>
      <h4>Orientation date</h4>
      <p>Tue 10/11 and Wed 10/12: 8am - 3pm</p>
      <a href="read"Read more</a>
    </div>
    <div class="campus">
      <img src="C:\colmar\information-campus.jpg"/>
      <h4>Our campus</h4>
      <p>Find which campus is close by you</p>
      <a href="read_more"Read more</a>
    </div>
    <div class="lecture">
      <img src="C:\colmar\information-guest-lecture.jpg"/>
      <h4>Our guest lecture</h4>
      <p>Join a keynote with Oliver Sack <br/>about music in medical treatment</p>
      <a href="more">Read More</a>
    </div>
  </div>

</div>[enter image description here][1]

Answer 1

是的，根据@domsson，你必须为CSS和div alignment做一些努力。有一部分让我帮你做一些启动。检查以下代码以获得基础帮助。

  

代码风格：

.container
{
    padding: 15px;
    margin: 15px auto;
    width: 100%;
    float: left;
    display: block !important;
    position: relative;
}
.left
{
  width: calc(48px + 60%);
  float:left;
}
.right
{
  width: calc(40% - 48px);
  float:left;
}
h2
{
    margin: 32px 0px 32px 0px;  
}

  

表示html：

<div class="container">
<div class="left">
    <img src="C:\colmar\information-main.jpg"/>
    <div class="text">
      <h2>It doesn`t hurt to keep practicing</h2>
      <p>"Curabitur vitae libero in ipsum portitor consequat. Aliquam et commodo lectus, <br/> nec consequat neque. Sed non accumsan uma. Phasellus sed consequat ex. Etiam <br/> eget magna laoreet, eficitur dolor consequat, tristique ligula."</p>
      <span>Emanuel, Sr Strategist at Hiring.com</span>
    </div>
  </div>

  <div class="right">
    <div class="orientation">
      <img src="C:\colmar\information-orientation.jpg"/>
      <h4>Orientation date</h4>
      <p>Tue 10/11 and Wed 10/12: 8am - 3pm</p>
      <a href="read"Read more</a>
    </div>
    <div class="campus">
      <img src="C:\colmar\information-campus.jpg"/>
      <h4>Our campus</h4>
      <p>Find which campus is close by you</p>
      <a href="read_more"Read more</a>
    </div>
    <div class="lecture">
      <img src="C:\colmar\information-guest-lecture.jpg"/>
      <h4>Our guest lecture</h4>
      <p>Join a keynote with Oliver Sack <br/>about music in medical treatment</p>
      <a href="more">Read More</a>
    </div>
  </div>

</div>