HTML：

Question

我想创建一个包含fluid（？）的4页（a，b，c和d）的网站，以便根据设备的宽度更改宽度。

我希望最小宽度为设备的宽度。但如果内容更大，不用担心。然后我希望有一个指向每个页面开头的超链接。

这就是我试过的

HTML：

<table>
    <tr>
        <th id="a" scope="col">a</th>
        <th id="b" scope="col">b</th>
        <th id="c" scope="col">c</th>
        <th id="d" scope="col">d</th>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>
<table>
    <tr>
        <th scope="col"><a href="#a"> a </a>
        </th>
        <th scope="col"><a href="#b"> b </a>
        </th>
        <th scope="col"><a href="#c"> c </a>
        </th>
        <th scope="col"><a href="#d"> d</a>
        </th>
    </tr>
</table>

JQUERY：

$(document).ready(function() {

$("#a").css({'width':''+$(window).width()});

$("#b").css({'width':''+$(window).width()});

$("#c").css({'width':''+$(window).width()});

$("#d").css({'width':''+$(window).width()});

});

JSFIDDLE

但正如你在fiddle中所看到的，它没有像我说的那样做任何事情

Answer 1

要使具有响应性的水平对齐面板，您只能轻松使用CSS。这是一个演示：http://jsfiddle.net/NicoO/ndTH7/2/

每个面板的宽度始终至少为当前浏览器宽度。如果内容长于该内容，则面板将展开。

CSS看起来像这样：

*
{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
}

html, body
{
   height:100%;  
}
body
{
    margin:0;
    padding:0;  
}

.links
{
    position: fixed;
    top:0;
    padding: 8px 0px;
    list-style: none;
    width: 100%;
}
.links li
{
    display: inline-block;
}

.panels
{
    white-space: nowrap;
    height: inherit;
}

.panel
{
   height: inherit;
   font-size: 20px;
   text-align: center;
   padding: 20px;
   display: inline-block;
   min-width: 100%;
}

.stupid-long-content
{
    width: 3000px;
    display: block;
}

/* look up inline-block space */
.panel + .panel
{
    margin-left: -4px;
}

#a
{
    background-color: green;   
}

#b
{
    background-color: red;   
}

#c
{
    background-color: blue;   
}

#d
{
    background-color: silver;   
}

使用此HTML：

<ul class="links">
    <li><a href="#a">A</a></li>
    <li><a href="#b">B</a></li>
    <li><a href="#c">C</a></li>
    <li><a href="#d">D</a></li>
</ul>
<div class="panels">
    <div class="panel" id="a">Hi</div>
    <div class="panel" id="b">Hello</div>
    <div class="panel" id="c"><span class="stupid-long-content">Morning</span></div>
    <div class="panel" id="d">Test</div>
</div>

非常简单，完全响应，并且不需要任何JS。

网站有4个水平流体页面

HTML：

JQUERY：

JSFIDDLE

1 个答案: