Question

我创建了一个包含2个白色侧边栏小部件，灰色文章框和一些彩色按钮的网站。目前，使用left:175px;的CSS属性#mw-panel来定位窗口小部件和圈子项，同时使用#right-navigation li a放置right: 30em;。

不幸的是，这只在我的特定1080p屏幕上看起来最好。如果浏览器窗口调整大小，则窗口小部件和按钮项开始与主文章重叠。

我尝试将left: 175px;转换为margin-right: 20px;，以便小部件在文章之间保持20px的恒定距离。尝试此操作后，我的白色小部件被放置在浏览器窗口的左边缘。然后我试图改变显示：绝对;别的什么，但我没有成功。

为了获得与图片中相同的结果，我需要在代码中进行哪些更改？

＆＃13;

#right-navigation li a {
font-size: 14px;
color: white;
text-shadow: 4px 4px 15px #000;
display: block;
padding-left: 60px;
opacity: 0;
-webkit-transition: all .4s cubic-bezier(.4, 0, .2, 2);
transition: all .4s cubic-bezier(.4, 0, .2, 2);
    width: 250px;
}

#right-navigation li, #right-navigation li:after {
    -webkit-transition: all .2s cubic-bezier(.4, 0, .2, 1);
    transition: all .2s cubic-bezier(.4, 0, .2, 1);
}

#right-navigation li:after {
content:'';
width: 10px;
height: 10px;
border-radius: 50%;
left: 20px;
top: 20px;
}


#right-navigation li:hover:after {
width: 50px;
height: 50px;
left: 0;
top: 0;
}

#right-navigation li:hover > li {
transform: rotate(90deg);
}

#right-navigation li:hover a {
    opacity: 1;
    padding-left: 75px;
}

#right-navigation li{
border-radius: 50%;
margin-top: 10px;
width: 50px;
height: 50px;
box-shadow: 0 0 4px rgba(0, 0, 0, .11), 0 4px 8px rgba(0, 0, 0, .22);
transition: 0.2s opacity;
}

#left-navigation {
position: absolute;
}

#right-navigation{
position:absolute;
right: 30em;
top: 250px;
}

.content .entry {
    background-color: #6b6b6b;
}

#mw-panel,#p-personal {
padding: 1em;
background: #fff;
border-radius: 10px;
position: absolute;
left: 175px;
width: 240px;
}

#ca-view{
top: 120px;
background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABi0lEQVRIS+3VvUuWYRQG8J99URZBo4MkNAgOhlBLlNoQFDhLCtIf0KJEYkRkH2RSCA3SILa2C4KDUhYEgUNDEARODkJTBJEffXHkvPFgr74avIt5TzfPfd33dc55znWdGlVeNVV+384kaEI76rGEd5jG13XlPIILOIlaLOAF3hdxxRI1YxRnE/ADe1gr4xc8xoP8dhPXECSxArs3929wNQP78w8aMZeAYTzHfEbWhgG0Yhz7cAWzeIhX+IYT6EZ/BnUKH0oZ3Mjo4pHXZTorMpnC+bw8g0v4WQZ7Lklv4X6JYBC38/JGnVvCxPndxJfDxptBfAeD/0qwdnkTDf3aJfiPS9SBPrTgWFrFR0zgIK5n5zxJRV9EQ4rvE95iBC836qIVLCYgvOUwTuMMlnEoCVZTM6Hi8KpQchCFNx3NYP7SwWX0pmLXt/hx3EMPoscjgyFE1MUVNtKJRxgrCq0Lk2lqm82gsJTPeFphUNWllTwrKTmYv29huu0vlKgS/ABWduZEq5T6ts6rXqLfh2hoGXiHSEYAAAAASUVORK5CYII=') no-repeat center,radial-gradient(#00FFFF, #00878E);}

#ca-ve-edit{
top: 180px;
background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABMklEQVQ4T53USytFURgG4IeBOz+GUiISUQYmLhGSKPlDp0SSlCQJuY0MlZl/Yqbc+7SPdqd9Oees6Vr72d+7vrVWi+ZHKypYxiqug2pp0gtsHxvJ9+9YwFWzYD+e0JYqKND5RsE+DOARszirQV8bAQN7QFT3Fy8DrdQL9ibYUO2epdA7zNUD9uAewzUN/G8ExvCMtzIwsPjzSM5pCHQQL9X5IrAbtxgtOFq72MFPGdiVYBElb+xhO43lHexO3GC8ADvAVi2WBQYWV2iiADvEJr6z1qT3sCPBJguwo+S6ZWLpCgO7xFQBdoz1vMrSTWlPsOkC7ARr+Cp7TCJyNGCmYOEpVurBqpH/z1AGGpc/3rvSytKR88BzLOGzLGZ6PiJngRdYbBTLixzdjufpo5HKqmt/AYr2Pul4ZEE5AAAAAElFTkSuQmCC') no-repeat center, radial-gradient(yellow, #BD9D01);
}

#ca-edit,#ca-viewsource{
top: 240px;
background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAtklEQVRIS92VwQ3CMAxFXyeBURgFJilMAqMwCmxSWYqlUuzEapJWai+92P/Z34kz0PkbOutzfMAZ+BRszMbkLLonYf17nGycB5CkEXgAEYAbawFUXCq+Aa+CRVfgmWL+CloC5uKR6pXt5s0BUXEZ6hs4AV/gkg6Cma+AWnG3EwG0EjchUYBnizX/n4IjFq0WF3dKQ64Sl/Y2PabWkJpftCUkctmya2W3ZaeddF3XTV7T4z+Z1TZNfeFJGe4QW0kAAAAASUVORK5CYII=') no-repeat center, radial-gradient(orange, #B75D00);
}

.site-inner,
.wrap{margin:0 auto;max-width:1200px;}

.site-inner{clear:both;padding-top:40px;}


body {
    background-image: linear-gradient(#434343, #282828);
    color: #555;
    font-family: Open Sans, sans-serif;
    font-size: 14px;
    line-height: 24px;
    margin: 0;
}

＆＃13;

<body class="full-width-content">

  <link rel="stylesheet" id="child-theme-css" href="https://vocaloid.de/wp-content/themes/Vuturize/style.css" type="text/css" media="all">
  <div id="mw-panel">

    <div class="portal" role="navigation" id='p-navigation' aria-labelledby='p-navigation-label'>
      <h3 id='p-navigation-label'>Box1</h3>
      TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
    </div>
  </div>

  <div class="site-inner">
    <div class="content-sidebar-wrap">

      <main class="content">
        <article id="content" class="page type-page entry">
          <h1>Demo</h1>
          <div id="bodyContent" class="mw-body-content">
            <div id="jump-to-nav" class="mw-jump">
              <a href="#mw-head">Navigation</a>
            </div>
          </div>
        </article>
      </main>
    </div>

    <div id="mw-head">
      <div id="p-personal" role="navigation" class="" aria-labelledby="p-personal-label">
        <h3 id="p-personal-label">Box2</h3>
        TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST</div>

      <div id="right-navigation">
        <div id="p-views" role="navigation" class="vectorTabs" aria-labelledby="p-views-label">
          <h3 id="p-views-label">Ansichten</h3>
          <ul>
            <li id="ca-view" class="selected">
            </li>
            <li id="ca-ve-edit">
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

＆＃13;

Answer 1

将此类添加到.site-inner以对齐屏幕的容器中心。

.site-inner{
  margin-left: auto;
  margin-right: auto;
}

Answer 2

而不是使用px像素特定尺寸，而是使用%或em尺寸。
您还可以使用CSS @media查询选择器通过设置em来设置body{font-size:**px}大小的基础（其中*是基于当前显示/窗口大小的一小部分的数字）。

这将设置响应式布局的基础，您的内容也会相应缩放。

如果您需要高度可扩展的解决方案，而是尝试在SVG中构建内容，并让SVG元素在SVG元素根目录上具有min-width和min-height属性，这将防止事情变得太小

这是SVG解释的一个例子：

<svg
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    width="100%"
    height="100%"
    viewBox="0 0 1920 1080"
    style="display:block; min-width:640px; min-height:360px">

    ... The rest of your code here ...

</svg>

如上所示，上面的效果非常好，您可以看到，分辨率基于您当前的分辨率，但会完美缩放并保持较小（或更大）分辨率/显示器的比例。

唯一的缺点是你必须在SVG中做所有事情，这不是一件坏事，但如果要求另有规定则可能是一个问题。
虽然优势很大，因为您可以使用SVG编辑器构建交互式组件，例如＆＃34; Inkscape＆＃34; （免费），然后保存，并在网络浏览器中查看您的模型 - 粗略节省了大量时间，而不是手动编码一切。

CSS：使用保证金调整Div容器

2 个答案: