相关疑难解决方法(0)

我在使用flexbox布局时遇到了一些麻烦.我想要实现的是下面的图像是如何定位的.但是,使用边距和填充,我可以将元素移动到正确的位置,而不会发生剧烈的事情.

我可能不正确地接近这个.如果有人可以给我一些建议并解释如何正确地做到这一点会很好.

线框

现在怎么样

HTML

<div style="background: grey;">
    <div class="parent-container" style="flex-direction: column; align-items: center; margin: 10px;">
        <div class="aelia-text child33">
            The first of it's kind, to<br/>
            create a better customer<br/>
            journey with reduced<br/>
            collection waiting time and<br/>
            a special moment that makes<br/>
            even the most jet-lagged<br/>
            shopper smile.
        </div>
        <div class="child33">
            <div class="img-wrapper" ng-style="{'background-image':'url(/assets/Aelia_Robot_highres006.jpg)'}"></div>
        </div>
        <div class="child33">
            <div class="img-wrapper" ng-style="{'background-image':'url(/assets/AELIA_IMAGE.jpg)'}"></div>
        </div>
    </div>
</div>

CSS

.aelia-text {
    background: white;
    color: black;
    font-size: 1.5vw;
    font-family: portland-medium-font; 
    -ms-flex-pack: center; 
    justify-content: center;
    -ms-flex-align: center;
    align-items: …

我想做这样的事情:

|--------------------------------------------------------|-------------|
|                                                        |             |
|                    DIV 1                               |             |
|                                                        |    DIV 3    |
|--------------------------------------------------------|             |
|                    DIV 2                               |             |
|--------------------------------------------------------|-------------|

我不能用这个表.我不知道是否有办法让他们像这样堆叠？

我尝试使用下面的代码,但DIV 3并不是最重要的.它实际上正好是div2.height从顶部较低.

#DIV_1 {
  height: 125px;
  width: 80%;
  display: block;
  float: left;
}
#DIV_2 {
  width: 80%;
  height: 15px;
  display: block;
}
#DIV_3 {
  display: block;
  float: left;
  height: 140px;
  width: 20%;
}

<div class="row" style="width: 1024px; height: 140px;">
  <div>
    <div id="DIV_1"></div>
    <div id="DIV_2"></div>
  </div>
  <div id="DIV_3">
  </div>
</div>

我有一个问题,我有一个flexbox,但我并不希望每个元素根据给定的属性间隔,所以我想玩边距.

我在框的顶部有一个标题,但我希望它与其余元素之间的间距.

所以我希望将我的p元素列表组合在一起但距离标题更远.

但是,当我这样做margin-bottom时没有效果(当我增加或减少margin-bottom任何变化时).

我最初是以百分比形式进行的,并将其更改为像素,但这似乎也不是问题.

在片段中我看起来没什么问题但是在更大的浏览器上,标题和p元素之间几乎没有任何空间是问题.

.container {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  min-height: 70vh;
  width: 70%;
  margin: 5% auto 8% auto;
  background-color: white;
}
.container p {
  margin-bottom: 2%;
}
.container h2 {
  color: orange;
  font-size: 34px;
}
.middle p:first-child {
  margin-top: 8%;
}
.bspace {
  margin-bottom: 50px;
}
.box h2 {
  color: orange;
  text-align: center;
}
.left {
  display: flex;
  flex-flow: row wrap;
  align-items: center; …

我试图将一个伪:after元素定位在菜单列表项右侧30像素.

无论项目文本的长度如何,我都希望元素向右移动30px.

我已将以下代码剥离到我认为此问题所需的最低限度.

请注意,这是一个移动菜单.菜单和a标签链接扩展了浏览器(手机)的整个宽度.

#menu-main-menu-1 li {
  position: relative;
  list-style: none;
}
#menu-main-menu-1 li a {
  padding: 18px 0;
  display: block;
  text-align: center;
}
#menu-main-menu-1 a:after {
  content: "\25CF";
  position: absolute;
  right: 0;
  left: 150px;
  top: 20px;
}

<ul id="menu-main-menu-1">
  <li class="menu-item">
    <a href="#">Menu Item</a>
  </li>
  <li class="menu-item">
    <a href="#">Long Menu Item Text</a>
  </li>
</ul>

上面的代码产生以下结果:

正如您所看到的,我需要将其放置在左侧150px处,以使元素在项目的右侧移动30px.它可以工作,但我可以预见一个问题,如果菜单项有很多文本,它将超过150px,元素将在文本中.例如:

无论长度如何,我都需要元素在文本的右边30px.所以它看起来像:

这是JSFiddle链接: JSFiddle

请注意,我已经删除了许多不影响此问题功能的不必要的样式(颜色,字体等)

任何帮助将非常感激!

谢谢

由于某些奇怪的原因，添加align-items: flex-end甚至flex-start破坏了粉红色弯曲项目的良好滚动溢出行为，因为它比容器高度高。

如果这是预期的行为，请帮助我保留滚动，即使在弯曲端对齐中也是如此。

这是演示。

.slidesWrap {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.slide {
  overflow: auto;
  flex: 1;
}

<div style="width: 200px; position:relative; top: 200px; background: silver;">
  <div class="slidesWrap" style="height:200px">
    <div class="slide">
      <div style="height:300px; width:100%; background: pink;">content</div>
    </div>
    <div class="slide">
      <div style="height:30px; width:100%; background: green;">content</div>
    </div>
  </div>
</div>

要同时水平和垂直居中,有两个简单的选项:

第一

.outer {
  display:flex;
}
.inner {
  margin:auto;
}

第二

.outer {
  display: flex;
  justify-content: center;
  align-items: center;
}

有什么不同？在什么情况下我们会使用一个而不是另一个？

我认为我的代码井井有条，但是我不知道为什么我无法以这种方式组织元素：

|**   *|

这是我的代码：

|**   *|

.container {
  border: 1px solid red;
  display: flex;
  justify-content: flex-start;
  width: 100%;
  height: 200px;
  flex-direction: row;
}

.container div {
  border: 1px solid blue;
  height: 100px;
  width: 100px;
}

.right {
  display: flex;
  align-self: flex-end;
}

我究竟做错了什么？这是我的实时代码：https : //jsfiddle.net/uxpkh9nL/

我有HTML,如下所示:

<div class="page-break">  
   <div class="menu-item-div">
      <!-- CONTENT WITHIN DIV -->
   </div>

   <div class="menu-item-div">
      <!-- CONTENT WITHIN DIV -->
   </div>

   <div class="menu-item-div">
      <!-- CONTENT WITHIN DIV -->
   </div>
</div>

每个.menu-item-div我需要垂直均匀分开以填充div的高度.div .page-break的设定高度为210mm.

每个.page-breakdiv都有不同的数量.menu-item-div.我需要能够在垂直方向上均匀地放置这些div,但是要保持在.page-breakdiv的210mm高度内.

使用flexbox的解决方案很好,我只是不知道flexbox足以做到这一点.
另一个要求是这些div将被打印,并且必须在打印时工作.

我在弹性框中对齐两个元素时遇到了麻烦:我想要发生的是将"帮助"div放到"XX"div的右侧然后左侧.我刚开始使用柔性容器,通常会在一个元素之后立即浮动,从而产生所需的效果.有谁知道我怎么能做到这一点？

<html>
<head>
<style>
body {
   margin:0;
   padding:0;
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
}

#menuStrip {
   position:relative;
   border-style: solid;
   border-width: 1px;
   height:36px;
   padding:0;
   margin:0;
   background-color:black;
}

#menuContainer {
   position:relative;
   background-color:grey;
   border-style: solid;
   border-width: 1px;
   padding:0;
   width:96%;
   height:98%;
   margin: 0 auto;
   display: flex;
}

#hh {
   position:relative;
   display:flex;
   align-self: center;
   font-size:14px;
   width:80px;
   border-style: solid;
   border-width: 1px;
   height:50%;
   margin-left:auto;
}


#pp {
   position:relative;
   display:flex;
   height:70%;
   width:36px;
   align-self: center;
   justify-content: center;
   margin-left: auto;
   background-color:white;
   border-style: solid;
   border-width: 1px;
   padding:0;   
}
</style>
</head> …

我正在努力将我的容器中的一些内容水平居中:

https://jsfiddle.net/y56t31q9/6/

.container {
  display: flex;
  flex-direction: column;
  width: 600px;
  background-color: blue;
  justify-content: center;
  /* Not centering content horizontally? */
}
.item {
  max-width: 500px;
  height: 100px;
  background-color: yellow;
  border: 2px solid red;
}

<div class="container">
  <div class="item"></div>
  <section class="item"></section>
  <section class="item"></section>
  <footer class="item"></footer>
</div>

我本以为是合理的 - 内容会成功,但无济于事.

任何帮助将不胜感激谢谢!