文章/答案/技术大牛

发布

社区首页 >问答首页 >如何制作固定大小的内容

问如何制作固定大小的内容
EN

Stack Overflow用户

提问于 2022-09-17 06:46:27

回答 2查看 38关注 0票数 -1

目标：

使内容仅在桌面上有固定宽度700 to，而左内容和右内容宽度应与桌面宽度相适应。

问题：

我不知道怎样才能很好地解决这个问题。

信息：

*布局须顾及因应需要的设计。

*桌面宽度尺寸最小，宽度为901 att

* css布局中的新手

Jsbin：

https://jsbin.com/wegebemoqe/edit?html,css,output

<!DOCTYPE html>
<html>

    <head>
        <title></title>
        <meta charset="UTF-8" />
    </head>
    <body>
        <div id="container">
            <div id="top-content" class="palette-1">
                top
            </div>
            <div id="content" class="palette-2">
                content
            </div>
            <div id="footer" class="palette-4">
                footer
            </div>
            <div id="left-content" class="palette-5">
              
            </div>
            <div id="right-content" class="palette-5">
              
            </div>
        </div>
    </body>
</html>

body {
    color: white;
    text-align: center;
    box-sizing: content-box;
    margin: 20px;
    
}

.palette-1 {
    background-color: #83B2FF;
}

.palette-2 {
    background-color: #8BF18B;
}

.palette-4 { 
    background-color: #FF8650;
}

.palette-5 { 
    background-color: #FF555E;
}

#container {
    margin: 2.5rem;
    padding: 0.625rem;
    background-color: #FFE981;
    height: 37.5rem;
    width: calc(100vw - 10rem);
    display: grid;
    grid-template-areas:
      "header header header header"
      "left-content content content right-content"
      "footer footer footer footer";
    row-gap: 1rem;
}

@media screen and (min-width: 901px) {
    #content {
      width: 700px;
    }
}            

@media screen and (max-width: 900px) {
  #container {
    grid-template-areas:
      "header header"
      "content content"
      "footer footer"
    }
  

    #left-content, #right-content {
      display: none;
    }
}  

.item {
  padding: 1.5rem;
}

#top-content {
    grid-area: header;
}

#content {
    grid-area: content;
}

 #footer {
    grid-area: footer;
}

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-09-21 20:20:34

https://jsbin.com/tubodokusa/edit?html,output

<!DOCTYPE html>
<html>

    <head>
        <title></title>
        <meta charset="UTF-8" />
    </head>
    <body>
        <div id="container">
            <div id="top-content" class="palette-1">
              <div id="testtest">
                <img src="https://i2.wp.com/vanillicon.com/9d348569b83638e8dea4e9ef05a828b4_200.png" width="100px" height="45px" />
              </div>
              <div id="asdfasdf">
                <span onclick="myFunction2()">Menu</span>
                <img onclick="myFunction()" src="https://i2.wp.com/vanillicon.com/9d348569b83638e8dea4e9ef05a828b4_200.png" width="100px" height="45px" />
              </div>
              <ul id="iconmenu" class="nav-menu">
                <li class="title">Coffee</li>
                <li class="title">Tea</li>
                <li class="title">Milk</li>
              </ul>
            </div>
            <div id="content" class="palette-2">
                content
            </div>
            <div id="footer" class="palette-4">
                footer
            </div>

        </div>
    </body>
</html>

body {
    color: white;
    text-align: center;
    box-sizing: content-box;
    margin: 0;
}

.palette-1 {
    background-color: #83B2FF;
}

.palette-2 {
    background-color: #8BF18B;
}

.palette-4 { 
    background-color: #FF8650;
}

.palette-5 { 
    background-color: #FF555E;
}

#container {
  

  
}


#content {
    grid-area: content;

}

 #footer {
    grid-area: footer;
}


@media only screen and (min-width: 1030px) {
  #container {
    
  background-color: #FFE981;
  width: 100%;
  display: grid;

  grid-template-areas:
    "left-header header right-header"
    "left-content content right-content"
    "left-footer footer right-footer";
    row-gap: 1rem;

  
    display: grid;
    /*
    grid-template-columns: 1fr fit-content(500px) 1fr;
       grid-template-columns: 1fr auto 1fr; */
    grid-gap: 5px;
    box-sizing: border-box;
    height: 200px;
    background-color: #8cffa0;
    padding: 10px;      
    
    
    grid-template-columns: 1fr 1000px 1fr;
    grid-template-rows: auto auto auto;    
  }
  
  #top-content {
    grid-area: header;
    display: flex;
    align-items: center;
    justify-content: center;
    
    border-top: 3px solid #425c62;
  }
  
  #asdfasdf {
    display: none;
  }
  
  ul.nav-menu {
    margin: 0;
  }

  ul.nav-menu > li {
    display: inline-block;
    padding: 0 10px 0 10px;
    margin: 0;
    line-height: 70px;
    border-top: 1px solid #83B2FF;

  }

  ul.nav-menu > li:hover {
    background-color: #2779BF;
    border-top: 1px solid #425c62;
  }  
  
  #content {

  }
  
}            



@media only screen and (max-width: 1029px) {
  #container {
    grid-template-areas:
      "header"
      "content"
      "footer"
  }
  
  #top-content {
    grid-area: header;
    align-items: center;
  }
  
  #left-content, #right-content {
    display: none;
  }
  
  
  .mystyle {
    display: none;
    transition: all 1s ease-in;
    padding: 0 0 0 0;    
    line-height: 0;
  } 
  
  
  #testtest {
    background-color: blue;
  }
  
  #asdfasdf {  
    /**/
    grid-area: header;
    display: flex; 
    align-items: center;
    justify-content: space-between; 
    
    background-color: grey; 
  }  

  ul.nav-menu {
    margin: 0;
  }

  ul.nav-menu > li {
    display: inline-block;
    padding: 0 10px 0 10px;
    margin: 0;
    line-height: 70px;
    border-top: 1px solid #83B2FF;

  }

  ul.nav-menu > li:hover {
    background-color: #2779BF;
    border-top: 1px solid #425c62;
  }  
  
  #content {

  } 
  
  
}

function myFunction() {
  var element = document.getElementById("iconmenu"); 
  element.classList.add("mystyle");
}

function myFunction2() {
  var element = document.getElementById("iconmenu"); 
  element.classList.remove("mystyle");
}

票数 0

Stack Overflow用户

发布于 2022-09-17 06:52:47

当您需要或示例700‘t时，以及当您不需要只设置#content时，为什么不为width: auto设置这个大小？

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73752749

复制

相似问题

问如何制作固定大小的内容
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何制作固定大小的内容EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何制作固定大小的内容
EN