我可以创建这样的HTML设计吗?

时间:2017-11-22 06:05:39

标签: html css

我可以在这里创建一个类似于此解决方案的HTML设计:
HTML and CSS align divs between a line

但不使用位置属性。我使用的是桌子,但是我无法设计内部DIV 请指教。 attached image

1 个答案:

答案 0 :(得分:4)

看看这个



table {
  width: 500px;
  background: #2A3F50;
  margin: 40px 0px;
}

table tr td {
  padding: 10px;
}

table tr td div {
  background: #1BBC9D;
  padding: 20px;
  margin-top: -30px;
  margin-bottom: -30px;
  color: white;
}

<table>
  <tr>
    <td>
      <div>
        <h3>Do you know?</h3>
        <p>Over the past 12 weeks, most product sales for <b>Combisunate 20/120 Tablets 2</b> was on <b>Weednesday Jul 12, 2017</b>b>
        </p>
        <p>
          On that day, most verification came between <b>9AM</b> and <b>10AM UTC</b>
        </p>
      </div>
    </td>
    <td><img src="http://icons.iconarchive.com/icons/zhoolego/material/512/Folder-Doc-icon.png" width="100px" /></td>
  </tr>
</table>
&#13;
&#13;
&#13;