Question

我的页面上有三个容器，其中包含其他东西。但是，我似乎无法通过百分比来移动那些容器，以便正确调整大小。如果有任何意义，我使用的位置：相对于一切。任何帮助，将不胜感激！

                 position:relative;
                 height:100%;
                 width:100%
               }
               .picturebox {
                 position: relative;
                 border: solid white 1px;
                 min-width: 25%;
                 max-width: 25%;
                 height: 100%;
                 top: -350px;
               }
               .servicepic {
                 position: relative;
                 width: 100%;
                 top: 30%;
                 padding: 2%;
                 -webkit-box-sizing: border-box;
                 -moz-box-sizing: border-box;
                 box-sizing: border-box;
               }
               .middlecontainer {
                 position: relative;
                 border: solid white 1px;
                 min-width: 60%;
                 max-width: 60%;
                 top: 500%;
                 left: 25.1%;
               }
               .rightcontainer {
                 position: relative;
                 border: solid white 1px;
                 min-width: 14.75%;
                 max-width: 14.75%;
                 height: 100%;
                 top: -629px;
                 left: 85.2%;

<html>

<body>
  <div class="bigbox">
    <div class="container">
      <div class="title">
        <h1>Codes' Decoding</h1>
        <br>
        <h2 id="slogan">"Providing all of your web design needs"</h2> 
      </div>
    </div>
    <div id="buttoncontainer">
      <a href="file:///C:/Users/Cody/Desktop/Websites/Practice.html">
        <div class="breadcrumb1">
          <p>Home</p>
        </div>
      </a>
      <a href="breadcrumb2">
        <div class="breadcrumb2">
          <p>Stuff</p>
        </div>
      </a>
      <a href="breadcrumb3">
        <div class="breadcrumb3">
          <p>Stuff</p>
        </div>
      </a>
      <a href="breadcrumb4">
        <div class="breadcrumb4">
          <p>Stuff</p>
        </div>
      </a>
    </div>
    <div class="lightestl">
      <p>
        <br>
        <br>
      </p>
    </div>
    <div class="nextlightestl">
      <p>
        <br>
        <br>
      </p>
    </div>
    <div class="nextdarkestl">
      <p>
        <br>
        <br>
      </p>
    </div>
    <div class="darkestl">
      <p>
        <br>
        <br>
      </p>
    </div>
    <div class="lightestr">
      <p>
        <br>
        <br>
      </p>
    </div>
    <div class="nextlightestr">
      <p>
        <br>
        <br>
      </p>
    </div>
    <div class="nextdarkestr">
      <p>
        <br>
        <br>
      </p>
    </div>
    <div class="darkestr">
      <p>
        <br>
        <br>
      </p>
    </div>
    <div class="giantbox">
      <div class="picturebox">
        <img class="servicepic" src="http://exportbaltic.com/sites/default/files/styles/gallery_large_640/public/product-images/Export-Baltic.jpeg?itok=Cs0mNaSk">
      </div>
      <div class="middlecontainer">
        <p>hello</p>
      </div>
      <div class="rightcontainer">
        <p>hello</p>
      </div>
    </div>
  </div>
</body>

</html>

Answer 1

要获得此输出：Fiddle我将有问题的div上的position: relative;更改为position: absolute;，然后使用top: 0;直接定义了三个div的位置， width: %;取决于div所需的宽度，以便它们加起来达到100％，我还删除了边距，使它们均匀地组合在一起，并使用left: %;其中％是页面占用的百分比div向左。

这种方法的问题在于它不是很动态。做你想要的最好方法是使用Bootstrap等框架。

Answer 2

我的朋友你所做的事情根本就不是好习惯。

这是

 <div class = "lightestl"><p><br><br></p></div>
 <div class = "nextlightestl"><p><br><br></p></div>
 <div class = "nextdarkestl"><p><br><br></p></div>
 <div class = "darkestl"><p><br><br></p></div>
 <div class = "lightestr"><p><br><br></p></div>
 <div class = "nextlightestr"><p><br><br></p></div>
 <div class = "nextdarkestr"><p><br><br></p></div>
 <div class = "darkestr"><p><br><br></p></div>

而不是这个你可以放置图像或渐变CSS

使用位置相对于每件事情也不好。

使3个容器对齐相同的尺寸检查flexBox

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

没有以最高价值百分比移动的分部

2 个答案: