Question

我遇到的问题是我有一个网页，应该分为两个大的div链接，如按钮，一个在右边，一个在左边水平放置。按钮应占据每个屏幕的一半。页面上还有页眉和页脚。我正在使用css表来尝试实现这一点。但是，我有很多问题试图让它看起来像我想要的那样。

如果一个按钮中有更多文本，它将在屏幕上伸展，按钮将不再相同。如果我尝试使用表格布局：固定屏幕确实以我想要的方式分割，但文本不会移动到按钮/ div的中心，整个div不再是链接，只是文本。

为了让它看起来我想要它的方式我需要两个大的div链接填充页面和页脚之间大小相同的屏幕，一个在左边，另一个在文本居中的地方块和文本量不会影响大小。还需要它在所有浏览器中工作，但如果那不可能只是chrome就可以了。

以下是我目前的解决方案。

<html>
    <head>
    </head>
    <body>

    <div id = 'menuChoiceContainer'>
        <div id='menuChoiceHeader'>
                <h1>
                    Management Tool
                </h1>
        </div>
            <a href="/tool/itool/index.php" id="choicelink1">
                <span id="link-spanner1">MODELS1</span>
            </a>
            <a href="/tool/ytool/index.php" id="choicelink2">
                <span id="link-spanner2">MODELS2</span>
            </a>
        <div id='menuChoiceFooterWrapper'>
            <div id='menuChoiceFooter'>

            </div>
        </div>
    </div>

    </body>
</html>

#menuChoiceContainer {
    min-height: 100%;
    position: relative;
    width: 100%;
    min-width: 1000px;
    display: table;
}

#choicelink1{
    font: normal 5.10em/150px 'Capital TT', Arial, Helvetica, sans-serif;
    min-height: 100%;
    min-width: 100%;
    display: table-cell;
    position:relative;
    vertical-align: middle;
    text-align: center;
    background-image: url(../images/menuchoiceverticalsplit.jpg);
    background-repeat: no-repeat;
    background-position: right center;
    background-color: #fff;
}

#choicelink2{
    font: normal 5.10em/150px 'Capital TT', Arial, Helvetica, sans-serif;
    min-height: 100%;
    min-width: 100%; 
    display: table-cell;
    position:relative;
    vertical-align: middle;
    text-align: center;
    background-image: url(../images/menuchoiceverticalsplit.jpg);
    background-repeat: no-repeat;
    background-color: #fff;
}

Answer 1

您可以使用绝对定位将一个锚点放在左侧，将另一个锚点放在右侧

HTML

<div id='menuChoiceContainer'>
  <div id='menuChoiceHeader'>
    <h1>Management Tool</h1>
  </div>
  <a href="/tool/itool/index.php" class="option" id="choicelink1">
    <span id="link-spanner1">MODELS1</span>
  </a>
  <a href="/tool/ytool/index.php" class="option" id="choicelink2">
    <span id="link-spanner2">MODELS2</span>
  </a>
  <div id='menuChoiceFooterWrapper'>
    <div id='menuChoiceFooter'>
    </div>
  </div>
</div>

CSS

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
} 
#menuChoiceHeader {
  z-index: 100;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 50px;
  background-color: #EEE;
}

.option {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
}

.option span {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
#choicelink1 {
  left: 0;
  right: 50%;

  font: normal 5.10em/150px 'Capital TT', Arial, Helvetica, sans-serif;
  vertical-align: middle;
  text-align: center;
  background-image: url(../images/menuchoiceverticalsplit.jpg);
  background-repeat: no-repeat;
  background-position: right center;
  background-color: #fff;
}

#choicelink2 {
  left: 50%;
  right: 0;

  font: normal 5.10em/150px 'Capital TT', Arial, Helvetica, sans-serif;
  vertical-align: middle;
  text-align: center;
  background-image: url(../images/menuchoiceverticalsplit.jpg);
  background-repeat: no-repeat;
  background-color: #fff;
}

这是jsFiddle

您还可以查看bootstrap examples，使用它可以轻松创建任何（甚至是响应式）网页布局。

Answer 2

基本上，table-cell等于表中的td标记。很多人在改变表格单元的大小时遇到了问题。

通过将显示创建为表格和表格单元格，可以使事情变得复杂。

我建议你使用display：flex。这是更简单的方法。通过在父标记中声明display：flex，父级内的标记将以水平方式对齐。通过使用id，您可以为标记提供所需的宽度。

在给出的例子中，我平均划分了父母的空间。这里100％被共享为4个标签的25％。否则，您可以单独为子元素指定宽度。

确保子宽度的总和不超过父级。如果超过，将无法正常工作
示例：menuchoice-100％= header-10％，choicelink1-40％，choicelink2-40％，footer-10％

我希望这有效。

HTML：

   <div id = 'menuChoiceContainer'>

    <div class=child id='menuChoiceHeader'>
    cool
    </div>
        <a class=child href="/tool/itool/index.php" id="choicelink1">
            <span id="link-spanner1">MODELS1</span>
        </a>
        <a class=child href="/tool/ytool/index.php" id="choicelink2">
            <span id="link-spanner2">MODELS2asdasdasdasd</span>
        </a>

    <div class=child id='menuChoiceFooterWrapper'>
        <div id='menuChoiceFooter'>
        cool
        </div>
    </div>

</div>

CSS：

#menuChoiceContainer {
min-height: 100%;
position: relative;
width: 100%;
min-width: 1000px;
display:flex;
}

.child
{
width:25%;
border:1px solid red;
}

#choicelink1{
font: normal 5.10em/150px 'Capital TT', Arial, Helvetica, sans-serif;
position:relative;
vertical-align: middle;
text-align: center;
background-image: url(../images/menuchoiceverticalsplit.jpg);
background-repeat: no-repeat;
background-position: right center;
background-color: #fff;
}

#choicelink2{
font: normal 5.10em/150px 'Capital TT', Arial, Helvetica, sans-serif;
position:relative;
vertical-align: middle;
text-align: center;
background-image: url(../images/menuchoiceverticalsplit.jpg);
background-repeat: no-repeat;
background-color: #fff;
text-wrap:normal;
overflow:hidden;
}

网页分为两个可点击的按钮/链接，彼此水平

2 个答案: