网页分为两个相互垂直的可单击按钮/链接

olliejjc16

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

如果一个按钮中包含更多文本,它将在屏幕上延伸,并且按钮的大小将不再相等。如果我尝试使用table-layout:fixed,屏幕确实会按我想要的方式拆分一半,但文本不会移动到按钮/ 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;
}
笨拙的

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

的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

您还可以看一下引导程序示例,使用它们可以很容易地创建任何(甚至响应式)网页布局。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

TOP 榜单

热门标签

归档