在HTML CSS中需要帮助

Question

我想创建一个如此图所示的页面，但它没有显示相同的内容。

website.com/profile/name

#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);
}

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>

Answer 2

我认为你应该使用boostrap，如果你需要自定义类，那么你可以重新使用你想要的任何引导类。

在bootstrap中它看起来像这样：

<div class="col-md-12">  
  <div class="col-md-2">
  left side
  </div>
  <div class="col-md-8">
  middle
  </div>
  <div class="col-md-2">
  right side
  </div>
</div>

Answer 3

css：

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

#addcontainer {
  width: 100%;
}
#addprimary,#addsecondary  {
width:18%;
    display:inline-block;
    vertical-align:top;

}

#addcontent {
    margin:0 20px;
 display:inline-block;

  width: 55%;
  height: 390px;
  background: url(http://www.personal.psu.edu/afr3/blogs/siowfa13/Tigers-animals-20238015-2493-1983.jpg) no-repeat;
  background-size:  100% 100%; 
}

http://jsfiddle.net/souraj/t2rx7n0c/

您可以使用display：inline-block来显示元素。