Question

＆＃13;

h1

＆＃13;

有趣的＆＃39;问题。我试图在html / css中做一个非常简单的布局模板。（它很简单，因为它的目的地是汇合页面所以花哨越少越好）

布局相对简单 - 目的是并排放置三个菜单容器。这三个中的第三个也是最后一个框是旋转菜单按钮。

我的代码产生了两个问题。

1）在第三个黄色框中，您将看到我有两个旋转的div。它们之间的空间是巨大的，它们的容器表现得很奇怪 - 它大规模扩展..我想要的是容器按内容缩放，因为那里应该有五个菜单按钮，而不仅仅是两个。并且它们之间的间距应该只有2-5像素。

2）我似乎无法让容器在父容器中垂直居中。

（随意忽略标题栏。我将在稍后完成时将其缩放）

有人可以帮助我吗？

 <!DOCTYPE html>
<html>
<head>
<style>
.screencontainer{
margin: 0 auto;
display: block;
xxheight: auto;
xxmax-width: 90%;
align-items: middle;
}

.foundations-wrapper{
display: inline-block;
background-color: yellow;
padding: 10px;
xxheight: auto;
margin: auto;
}
.foundations-content{
display: block;
width:200px;
height:50px;
background-color: lightblue;
margin: auto;
margin-top: 10px;
text-align: center;
color: white;
}
.foundations-button{
display: inline-block;
width:20px;
height:20px;
background-color: blue;
margin: auto;
margin: 10px;
text-align: center;
color: white;
}
.search-wrapper{
display: inline-block;
background-color: yellow;
padding: 10px;
xxheight: auto;
margin: auto;
}
.search-content{
display: inline-block;
height:50px;
width:200px;
background-color: lightblue;
margin: 0 auto;
text-align: center;
color: white;
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}

.titlebar{
display: block;
width:404px;
height:20px;
border-radius:10px;
background-color: red;
text-align: center;
color: white;
}
</style>
</head>
<body>
<div class="screencontainer" style="border: 1px solid black;">
<div class="titlebar">1</div>
<div class="foundations-wrapper">
    <div class="foundations-content">1</div>
    <div class="foundations-content">1</div>
    <div class="foundations-content">1</div>
    <div class="foundations-content">1</div>
    <div class="foundations-content">1</div>
    <div class="foundations-content">1</div>
    <div class="foundations-content">1</div>

</div>
    <div class="foundations-wrapper">
        <div class="foundations-content">
            <div class="foundations-button">1</div>
            <div class="foundations-button">1</div>
            <div class="foundations-button">1</div>
        </div>
        <div class="foundations-content">
            <div class="foundations-button">1</div>
            <div class="foundations-button">1</div>
            <div class="foundations-button">1</div>
        </div>
        <div class="foundations-content">
            <div class="foundations-button">1</div>
            <div class="foundations-button">1</div>
            <div class="foundations-button">1</div>
        </div>
</div>


<div class="search-wrapper">
    <div class="search-content">1</div>
    <div class="search-content">1</div> 
</div>
</div>  
</body>
</html>

Answer 1

这是你想要的吗？

    <!DOCTYPE html>
<html>
<head>
<style>
.screencontainer{
margin: 0 auto;
display: block;

align-items: middle;
}

.foundations-wrapper{
display: inline-block;
background-color: yellow;
padding: 10px;
margin: auto;
}
.foundations-content{
display: block;
width:200px;
height:50px;
background-color: lightblue;
margin: auto;
margin-top: 10px;
text-align: center;
color: white;
}
.foundations-button{
display: inline-block;
width:20px;
height:20px;
background-color: blue;
margin: auto;
margin: 10px;
text-align: center;
color: white;
}
.search-wrapper{
position: relative;
display: inline-block;
background-color: yellow;
padding: 10px;
height: 200px;
margin: auto;
}
.search-content{
position: relative;
top: 75px;
display: inline-block;
height:50px;
width:200px;
background-color: lightblue;
margin: 0 auto;
text-align: center;
color: white;
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}

.titlebar{
display: block;
width:404px;
height:20px;
border-radius:10px;
background-color: red;
text-align: center;
color: white;
}
</style>
</head>
<body>
<div class="screencontainer" style="border: 1px solid black;">
<div class="titlebar">1</div>
<div class="foundations-wrapper">
    <div class="foundations-content">1</div>
    <div class="foundations-content">1</div>
    <div class="foundations-content">1</div>
    <div class="foundations-content">1</div>
    <div class="foundations-content">1</div>
    <div class="foundations-content">1</div>
    <div class="foundations-content">1</div>

</div>
    <div class="foundations-wrapper">
        <div class="foundations-content">
            <div class="foundations-button">1</div>
            <div class="foundations-button">1</div>
            <div class="foundations-button">1</div>
        </div>
        <div class="foundations-content">
            <div class="foundations-button">1</div>
            <div class="foundations-button">1</div>
            <div class="foundations-button">1</div>
        </div>
        <div class="foundations-content">
            <div class="foundations-button">1</div>
            <div class="foundations-button">1</div>
            <div class="foundations-button">1</div>
        </div>
</div>


<div class="search-wrapper">
    <div class="search-content">1</div>
    <div class="search-content">1</div> 
</div>
</div>  
</body>
</html>

Answer 2

喜欢这个？我在div中旋转了段落标记。

<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">





















  <script type="text/javascript" src="/js/lib/dummy.js"></script>








    <link rel="stylesheet" type="text/css" href="/css/result-light.css">




  <style type="text/css">

  </style>

  <title></title>
















<script type="text/javascript">
window.onload=function(){



}




</script>


</head>

<body>



<style>
.screencontainer{
margin: 0 auto;
display: block;
xxheight: auto;
xxmax-width: 90%;
align-items: middle;
}

.foundations-wrapper{
display: inline-block;
background-color: yellow;
padding: 10px;
xxheight: auto;
margin: auto;
}
.foundations-content{
display: block;
width:200px;
height:50px;
background-color: lightblue;
margin: auto;
margin-top: 10px;
text-align: center;
color: white;
}
.foundations-button{
display: inline-block;
width:20px;
height:20px;
background-color: blue;
margin: auto;
margin: 10px;
text-align: center;
color: white;
}
.search-wrapper{
display: inline-block;
background-color: yellow;
padding: 10px;
xxheight: auto;
margin: auto;
}
.search-content{
display: inline-block;
height:200px;
width:50px;
background-color: lightblue;
margin: 0 auto;
text-align: center;
color: white;
}

.titlebar{
display: block;
width:404px;
height:20px;
border-radius:10px;
background-color: red;
text-align: center;
color: white;
}
</style>


<div class="screencontainer" style="border: 1px solid black;">
<div class="titlebar">1</div>
<div class="foundations-wrapper">
    <div class="foundations-content">1</div>
    <div class="foundations-content">1</div>
    <div class="foundations-content">1</div>
    <div class="foundations-content">1</div>
    <div class="foundations-content">1</div>
    <div class="foundations-content">1</div>
    <div class="foundations-content">1</div>

</div>
    <div class="foundations-wrapper">
        <div class="foundations-content">
            <div class="foundations-button">1</div>
            <div class="foundations-button">1</div>
            <div class="foundations-button">1</div>
        </div>
        <div class="foundations-content">
            <div class="foundations-button">1</div>
            <div class="foundations-button">1</div>
            <div class="foundations-button">1</div>
        </div>
        <div class="foundations-content">
            <div class="foundations-button">1</div>
            <div class="foundations-button">1</div>
            <div class="foundations-button">1</div>
        </div>
</div>


<div class="search-wrapper">
    <div class="search-content" style="
    padding-right: 0px;
    margin-right: 5px;
"><p style="
    transform: rotate(90deg);
">
    1</p></div><div class="search-content"><p style="
    transform: rotate(90deg);
">
    1</p></div>


</div>
</div>  




  <script>
  // tell the embed parent frame the height of the content
  if (window.parent && window.parent.parent){
    window.parent.parent.postMessage(["resultsFrame", {
      height: document.body.getBoundingClientRect().height,
      slug: "r4q1u1f4"
    }], "*")
  }
</script>





</body></html>

https://jsfiddle.net/r4q1u1f4/7/

Css HTML和旋转的div

2 个答案: