Question

我有一个容器div作为主要内容，但我试图让一个侧边栏浮动到它的左边。例如（http://www.bureautonic.com/en/）菜单按钮。

这是代码

.main-wrapper {
      position: relative;
      top: 50%;
      height: 500px;

    }
    .container {
      position: relative;
      height: 100%;
    }
    .body {
      height: 100%;
    }
    .slider {
      display: block;
      width: 940px;
      height: 500px;
      margin-right: auto;
      margin-left: auto;
      float: none;
    }
    .img {
      position: absolute;
      width: 100%;
      height: 100%;
      max-height: 100%;
    }
    .tagline {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 1;
      display: block;
      width: 332px;
      margin-right: auto;
      margin-left: auto;
      padding: 1em 3em;
      border: 1px solid white;
      -webkit-transform: translate(-50%, 0px) translate(0px, -50%);
      -ms-transform: translate(-50%, 0px) translate(0px, -50%);
      transform: translate(-50%, 0px) translate(0px, -50%);
      font-family: 'Josefin Sans', sans-serif;
      color: white;
      text-align: center;
      text-decoration: none;
      text-transform: none;
    }
    .header {
      margin-top: 33px;
      margin-bottom: -61px;
    }
    .brand {
      font-family: Cardo, sans-serif;
      text-align: center;
    }

<body class="body">
  <div class="w-section container">
    <div class="w-container header">
      <h1 class="brand">The One And Only</h1>
    </div>
    <div class="w-container main-wrapper">
      <div data-animation="outin" data-duration="500" data-infinite="1" data-easing="ease-in-cubic" data-hide-arrows="1" class="w-slider slider">
        <div class="w-slider-mask">
          <div class="w-slide slide">
            <div class="tagline">
              <h1>Marc Cain</h1>
              <h3>F/W 2015-16</h3>
            </div>
            <img width="846" src="http://uploads.webflow.com/567a26541a69a693654038a1/567b15da06a9675444fc740d_marc_cain_campaign.jpg" class="img">
          </div>
        </div>
        <div class="w-slider-arrow-left">
          <div class="w-icon-slider-left"></div>
        </div>
        <div class="w-slider-arrow-right">
          <div class="w-icon-slider-right"></div>
        </div>
        <div class="w-slider-nav"></div>
      </div>
    </div>
  </div>
</body>

我正在使用网络流程并为你们上传网站http://the-one-and-only.webflow.io/

我最初尝试制作另一个具有设定宽度和100％高度的绝对div，但菜单按钮与主容器无关。任何帮助将不胜感激。

Answer 1

看一看，它模仿http://www.bureautonic.com/en/对其菜单的含义

$(function() {
  $('#menu-container').click(
    function() {
      ToggleMenu();
    }
  );
});

function ToggleMenu() {
  var $menu = $('#menu');
  var newleft = +$menu.css('left').replace('px', '') <= -150 ? '0' : '-300px';
  $('#menu').css('left', newleft);




}

#menu,
#content {
  width: 300px;
  height: 200px;
}
#menu-container {
  display: inline-block;
  height: 200px;
  width: 30px;
  background-color: yellow;
  position: relative;
}
#menu {
  display: inline-block;
  position: absolute;
}
#content {
  display: inline-block;
  position: relative;
  overflow: hidden;
  background-color: red;
}
#menu {
  transition: left 1s;
  left: -300px;
  background-color: orange;
}
#menu-label {
  -moz-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
  transform: translateX(-50%) translateY(-50%) rotate(-90deg);
  position: absolute;
  top: 50%;
  text-align: center;
  width: 200px;
  left: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="menu-container">
  <div id="menu-label">
    This is my Menu Label
  </div>
</div>
<div id="content">
  This is the content
  <div id="menu">
    Menu
  </div>
</div>

用于滑动菜单

基本概念是带有div和position:relative的父 overflow:hidden，带有{{1}的子 div }，以负position:absolute开头，等于left

的宽度

我使用了css div属性来获得平滑的幻灯片效果

编辑：

左对齐＆amp;旋转菜单标签

此效果是通过多个属性的组合创建的。

我的代码块已使用适当的css进行了更新。

请点击此处http://jsfiddle.net/CCMyf/79/（不是我的小提琴）进行更改如果您需要动态高度
，请转到transition

Answer 2

如果要将菜单浮动到主要内容的左侧，则需要首先创建要作为菜单的菜单元素（显然），然后使用float: left将其浮动到左侧。 e.g。

HTML

    <div class="floated-menu">
        Menu
    </div>

CSS

    .floated-menu {
        float: left;
        width: 50px;
        height: 600px;
        background-color: #ccc;
    }

然后你必须浮动主内容容器。 .e.g

    .container {
        float: left;
        position: relative;
        width: 800px;
        height: 100%;
    }

我可能是错的，但是我相信如果你不将两个项目都浮动，那么容器div display: block;属性的正常（非浮动上下文）行为就会启动并且它会向下移动页面到下一个＆＃34;行＆＃34;。这很奇怪，因为浮动的东西旁边的所有物品都应该失去它们的显示块行为并且坐在漂浮的物品旁边 - 即浮动最初是用于制作块状标题和段落旁边的图片，如杂志或报纸，但是是的，欢迎来到CSS的世界 - 你可以找到很多这样荒谬的东西此外，两个浮动元素border box（包含元素的最宽和最大的框）的组合宽度不能比它们的父元素宽 - 否则第二个元素将下拉到下一行 - 这实际上是有道理的。我在演示中缩小了您的尺寸，但在构建页面时必须对其进行管理您还需要记住，默认情况下浏览器使用＆＃34;内容盒＆＃34; box-sizing财产。来自文档

内容框

这是CSS标准指定的默认样式。宽度测量和高度属性仅包括内容，但不包括填充，边界或边距。注意：填充，边框和保证金将是在盒子外面，例如IF .box {width：350px};然后你申请 {border：10px solid black;} RESULT {在浏览器中呈现} .box {width：370px;}

以下是演示 - http://codepen.io/anon/pen/QyKyVV?editors=110

Div浮动在非浮动div旁边

2 个答案:

用于滑动菜单

编辑：

左对齐＆amp;旋转菜单标签