Question

详细说明：

我有两个容器，它们都占据了最大浏览器窗口的50％。他们是并排的。在这些容器中有两个进一步的容器，它们的设计就像一个按钮。

像这样： Example

现在我的问题是，当我从左到右调整浏览器时，div正在移动，但我希望它们保持原样。

以下是Div1和div2的一些代码：

<div id='picturediv1' class="image">
<div class="ghost">  
<a id="LK2" target="_blank" href="hehehe">Some link here</a>
</div>
</div>

这里有一些Div3和Div4的代码：

<div id='picturediv2' class="image2">
<div class="ghost2">
<a id="LK2" class="TFG2"  target="_blank" href="some link here" style="color:black;">Test2</a>
</div>
</div>

div 2和4的一些CSS代码。我只发布div2因为它们最相同。

div2的CSS：

      .ghost
            {
                /* position centered */
                display:inline-block;
                position: absolute;
                margin-top:20%;
                margin-left:50%;
                -webkit-transform: translateX(-50%) translateY(-50%);
                -ms-transform: translateX(-50%) translateY(-50%);
                transform: translateX(-50%) translateY(-50%);
                /* text styles */
                font-family: Tahoma, Verdana, Segoe, sans-serif;
                font-size: 13pt;
                letter-spacing: 0.3em;
                color:#ffffff;
                /* modify text */
                text-decoration:none;
                text-transform:uppercase;
                text-rendering:optimizeLegibility;
                /* add a border */
                border:0.15em solid #fff;
                padding:0.4em 0.6em;
                /* animate the change */
                -webkit-transition: color 300ms, background 500ms, border-color 700ms;
                transition: color 300ms, background 500ms, border-color 700ms;
                text-align: center;
                -moz-box-sizing: border-box;
                font-weight: 900;
                line-height: 60px;
                text-transform: uppercase;
                width:50%;
                text-align:center;  
            }

我添加了一些评论以便更好地理解，我希望我能够很好地描述它。

Answer 1

您可以使用flexbox来实现所需的输出。

您可以使用flex-direction:(row/column)，具体取决于您希望子元素如何对齐，如div1和div2所示，以垂直对齐文本Div1和子div.3。

.flex-container {
  display: flex;
  /*Generates a flexbox layout with default flex direction as row */
  width: 100%;
  /* Not really required */
  align-items: center;
  /*Aligns contents vertically */
  justify-content: center;
  /*Aligns contents horizontally */
  text-align: center;
  /*Aligns further text in the center */
}

#div1,
#div2 {
  border: 1px solid black;
  flex: 1;
  margin: 0 auto;
  height: 100px;
  display: flex;
  flex-direction:column;
  align-items: center;
  /*Aligns contents vertically */
  justify-content: center;
  /*Aligns contents horizontally */
  text-align: center;
  /*Aligns further text in the center */
}

#div3,
#div4 {
  border: 1px solid black;
  margin: 10px auto;
  padding: 20px;
  flex:1;
}

<div class="flex-container">
  <div id="div1">
    Div 1
    <div id="div3">Div 3</div>
  </div>
  <div id="div2">
    Div 2
    <div id="div4">Div 4</div>
  </div>
</div>

在调整浏览器窗口大小时，Div-container正在移动

1 个答案: