html - 在 HTML CSS 方面需要帮助

Question

我想创建一个如图所示的页面，但它显示的不一样。

#addcontainer {
  width: 100%;
}
#addprimary {
  float: left;
  max-width: 125px;
}
#addsecondary {
  float: right;
  width: 125px;
}
#addcontent {
  margin: auto;
  width: 740px;
  height: 390px;
  background: url(../img/home_page/home.jpg);
}

<div id="addcontainer">
  <div id="addprimary">
    <ul>
      <li>
        <a href="#home">
          <img src="https://www.seoclerk.com/pics/183798-18HhJR1392119968.jpg">>
        </a>
      </li>
    </ul>
  </div>
  <div id="addcontent">
  </div>

  <div id="addsecondary">
    <ul>
      <li>
        <a href="#home">
          <img src="https://www.seoclerk.com/pics/183798-18HhJR1392119968.jpg">
        </a>
      </li>
    </ul>
  </div>
</div>

Answer 1

你应该这样使用-

img{
  max-width: 100%;
}
ul{
  margin:0;
  padding:0;
}
li{
  list-style:none;
}

#addcontainer {
  width: 100%;
}
#addprimary {
  float: left;
  max-width: 125px;
  
}
#addsecondary {
  float: right;
  width: 125px;
}
#addcontent {
  margin: auto;
  float: left;
  /*width: 740px;*/
  width: calc(100% - 250px);
  height: 390px;
  background: url(http://img.reflex.cz/img/3/full/2394140-img-windows.jpg) no-repeat center center;
  background-size:  740px 390px; 
}

<div id="addcontainer">
  <div id="addprimary">
    <ul>
      <li>
        <a href="#home">
          <img src="https://www.seoclerk.com/pics/183798-18HhJR1392119968.jpg">
        </a>
      </li>
    </ul>
  </div>
  <div id="addcontent">
  </div>

  <div id="addsecondary">
    <ul>
      <li>
        <a href="#home">
          <img src="https://www.seoclerk.com/pics/183798-18HhJR1392119968.jpg">
        </a>
      </li>
    </ul>
  </div>
</div>