如何水平对齐包含文本列的2个div？

时间：2015-01-24 05:23:10

标签： html css

我正在使用水平滚动网站，我正在尝试将2个div与文本列对齐。

我无法对齐这两个div（第二个位于第一个div的左下角），而且有些列位于div之外。

我该如何解决这个问题？

HTML ：

<body>
<div id="main">
   <div id="content">
      <div id="article"><!-- columns of text --></div>
      <div id="comments"><!-- columns of text --></div>
   </div>
</div>
</body>

CSS ：

body {
    margin: 0;
    padding: 0;
    color: white;
    background: transparent;
}
#main {
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
}
#content {
    overflow-x: scroll;
    overflow-y: auto;
    height: 100%;
    top: 0;
    left: 0;
    background: black;
}
#article {
    border: 10px solid yellow;
    float: left;
    width: 100%;
    height: 100%;
    position: relative;
    box-sizing: border-box;
    font-size: 25px;
    text-align: left;
    -webkit-column-width: 300px;
    -webkit-column-gap: 40px;
    -moz-column-width: 300px;
    -moz-column-gap: 40px;
    column-width: 300px;
    column-gap: 40px;
    background: green;
}
#comments {
    border: 10px solid red;
    float: left;
    width: 100%;
    height: 100%;
    position: relative;
    box-sizing: border-box;
    font-size: 25px;
    text-align: left;
    -webkit-column-width: 300px;
    -webkit-column-gap: 40px;
    -moz-column-width: 300px;
    -moz-column-gap: 40px;
    column-width: 300px;
    column-gap: 40px;
    background: blue;
}

这是JSFiddle演示：http://jsfiddle.net/kz5ch49w/54/

5 个答案:

答案 0 :(得分：0)

这类似于我回答的另一个问题，除了另一个人有3个他希望水平对齐的div。

您的选择是：

  1. 将此添加到您的css：

    #articles,#comments {display: inline-block;}

  2. 将最内层的div更改为spans并将其添加到CSS：

    #articles, #comments {display: block;}

答案 1 :(得分：0)

 <body>
 <div id="main">
 <div id="content">
  <div id="article"><!-- columns of text --></div>
  <div id="comments"><!-- columns of text --></div>
 </div>
 </div>
 </body>

的CSS：

 body { margin:0; padding:0; color:white; background:transparent;width:auto }
 div { position:absolute;margin:1%;}

使用绝对位置并连续计算宽度和左侧位置。所以你可以使用水平滚动。例如：http://jsfiddle.net/kz5ch49w/57/

答案 2 :(得分：0)

我更新了你改变CSS属性的jsfiddle。喜欢位置，高度，宽度。

http://jsfiddle.net/kz5ch49w/58/

作为你的62 jsfiddle： - 我更新小提琴： - http://jsfiddle.net/kz5ch49w/64/

通过更改浏览器或小提琴高度，宽度或添加或修改内容来检查响应。

你需要做什么，永远不要给硬核高度，宽度。当你想要水平设置时，你可以给50％宽度，float：左边两个div。或者如果你想水平设置，你可以设置3 div的宽度33％。表示你的div默认设置为100％宽度，你可以设置float left将设置为left，width将用于其内容。

由于你的要求从不使用position和-moz ...（这是默认的mozila浏览器添加），每个浏览器都有自己的内容属性，当我们不提供任何内容时，每个浏览器都会添加属性本身，相同的属性可能不是进入另一个浏览器。

总是以％为基础的高度宽度为响应，永远不会有内容高度，如果给出％宽度或不给出宽度，它将自动向下滚动（在这种情况下，它需要浏览器宽度或父div宽度（如果你给出） ）。

我想，我会更好地解释你。

更新HTML 

    <html>
<head>
    <style>
        body {
            margin: 0;
            padding: 0;
            color: white;
            background: transparent;
        }

        #main {
            position: absolute;
            height: 100%;
            top: 0;
            left: 0;
        }

        #content {
            overflow-x: scroll;
            overflow-y: auto;
            height: 100%;
            top: 0;
            left: 0;
            background: black;
        }

        #article {
            border: 10px solid yellow;
            float: left;
            width: 50%;
            /*height: 100%;
            position: relative;*/
            box-sizing: border-box;
            font-size: 25px;
            text-align: left;
            /*-webkit-column-width: 300px;
            -webkit-column-gap: 40px;
            -moz-column-width: 300px;
            -moz-column-gap: 40px;
            column-width: 300px;
            column-gap: 40px;*/
            background: green;
        }

        #comments {
            border: 10px solid red;
            float: left;
            width: 50%;
            /*height: 100%;
            position: relative;*/
            box-sizing: border-box;
            font-size: 25px;
            text-align: left;
            /*-webkit-column-width: 300px;
            -webkit-column-gap: 40px;
            -moz-column-width: 300px;
            -moz-column-gap: 40px;
            column-width: 300px;
            column-gap: 40px;*/
            background: blue;
        }
    </style>
</head>


<body>

    <div id="main">

        <div id="content">

            <div id="article">

                <p>Sed (saepe enim redeo ad Scipionem, cuius omnis sermo erat de amicitia) querebatur, quod omnibus in rebus homines diligentiores essent; capras et oves quot quisque haberet, dicere posse, amicos quot haberet, non posse dicere et in illis quidem parandis adhibere curam, in amicis eligendis neglegentis esse nec habere quasi signa quaedam et notas, quibus eos qui ad amicitias essent idonei, iudicarent. Sunt igitur firmi et stabiles et constantes eligendi; cuius generis est magna penuria. Et iudicare difficile est sane nisi expertum; experiendum autem est in ipsa amicitia. Ita praecurrit amicitia iudicium tollitque experiendi potestatem.</p>

                <p>Equitis Romani autem esse filium criminis loco poni ab accusatoribus neque his iudicantibus oportuit neque defendentibus nobis. Nam quod de pietate dixistis, est quidem ista nostra existimatio, sed iudicium certe parentis; quid nos opinemur, audietis ex iuratis; quid parentes sentiant, lacrimae matris incredibilisque maeror, squalor patris et haec praesens maestitia, quam cernitis, luctusque declarat.</p>

                <p>Et hanc quidem praeter oppida multa duae civitates exornant Seleucia opus Seleuci regis, et Claudiopolis quam deduxit coloniam Claudius Caesar. Isaura enim antehac nimium potens, olim subversa ut rebellatrix interneciva aegre vestigia claritudinis pristinae monstrat admodum pauca.</p>

                <p>Ego vero sic intellego, Patres conscripti, nos hoc tempore in provinciis decernendis perpetuae pacis habere oportere rationem. Nam quis hoc non sentit omnia alia esse nobis vacua ab omni periculo atque etiam suspicione belli?</p>

                <p>Quibus ita sceleste patratis Paulus cruore perfusus reversusque ad principis castra multos coopertos paene catenis adduxit in squalorem deiectos atque maestitiam, quorum adventu intendebantur eculei uncosque parabat carnifex et tormenta. et ex is proscripti sunt plures actique in exilium alii, non nullos gladii consumpsere poenales. nec enim quisquam facile meminit sub Constantio, ubi susurro tenus haec movebantur, quemquam absolutum.</p>

                <p>Sed laeditur hic coetuum magnificus splendor levitate paucorum incondita, ubi nati sunt non reputantium, sed tamquam indulta licentia vitiis ad errores lapsorum ac lasciviam. ut enim Simonides lyricus docet, beate perfecta ratione vieturo ante alia patriam esse convenit gloriosam.</p>

                <p>Exsistit autem hoc loco quaedam quaestio subdifficilis, num quando amici novi, digni amicitia, veteribus sint anteponendi, ut equis vetulis teneros anteponere solemus. Indigna homine dubitatio! Non enim debent esse amicitiarum sicut aliarum rerum satietates; veterrima quaeque, ut ea vina, quae vetustatem ferunt, esse debet suavissima; verumque illud est, quod dicitur, multos modios salis simul edendos esse, ut amicitiae munus expletum sit.</p>

                <p>Figgeri, inquam, Triari, nullo pacto potest, ut non dicas, quid non probes eius, a quo dissentias. quid enim me prohiberet Epicureum esse, si probarem, quae ille diceret? cum praesertim illa perdiscere ludus esset. Quam ob rem dissentientium inter se reprehensiones non sunt vituperandae, maledicta, contumeliae, tum iracundiae, contentiones concertationesque in disputando pertinaces indignae philosophia mihi videri solent.</p>

            </div>

            <div id="comments">

                <p>Sed (saepe enim redeo ad Scipionem, cuius omnis sermo erat de amicitia) querebatur, quod omnibus in rebus homines diligentiores essent; capras et oves quot quisque haberet, dicere posse, amicos quot haberet, non posse dicere et in illis quidem parandis adhibere curam, in amicis eligendis neglegentis esse nec habere quasi signa quaedam et notas, quibus eos qui ad amicitias essent idonei, iudicarent. Sunt igitur firmi et stabiles et constantes eligendi; cuius generis est magna penuria. Et iudicare difficile est sane nisi expertum; experiendum autem est in ipsa amicitia. Ita praecurrit amicitia iudicium tollitque experiendi potestatem.</p>

                <p>Equitis Romani autem esse filium criminis loco poni ab accusatoribus neque his iudicantibus oportuit neque defendentibus nobis. Nam quod de pietate dixistis, est quidem ista nostra existimatio, sed iudicium certe parentis; quid nos opinemur, audietis ex iuratis; quid parentes sentiant, lacrimae matris incredibilisque maeror, squalor patris et haec praesens maestitia, quam cernitis, luctusque declarat.</p>

                <p>Et hanc quidem praeter oppida multa duae civitates exornant Seleucia opus Seleuci regis, et Claudiopolis quam deduxit coloniam Claudius Caesar. Isaura enim antehac nimium potens, olim subversa ut rebellatrix interneciva aegre vestigia claritudinis pristinae monstrat admodum pauca.</p>

                <p>Ego vero sic intellego, Patres conscripti, nos hoc tempore in provinciis decernendis perpetuae pacis habere oportere rationem. Nam quis hoc non sentit omnia alia esse nobis vacua ab omni periculo atque etiam suspicione belli?</p>

                <p>Quibus ita sceleste patratis Paulus cruore perfusus reversusque ad principis castra multos coopertos paene catenis adduxit in squalorem deiectos atque maestitiam, quorum adventu intendebantur eculei uncosque parabat carnifex et tormenta. et ex is proscripti sunt plures actique in exilium alii, non nullos gladii consumpsere poenales. nec enim quisquam facile meminit sub Constantio, ubi susurro tenus haec movebantur, quemquam absolutum.</p>

                <p>Sed laeditur hic coetuum magnificus splendor levitate paucorum incondita, ubi nati sunt non reputantium, sed tamquam indulta licentia vitiis ad errores lapsorum ac lasciviam. ut enim Simonides lyricus docet, beate perfecta ratione vieturo ante alia patriam esse convenit gloriosam.</p>

                <p>Exsistit autem hoc loco quaedam quaestio subdifficilis, num quando amici novi, digni amicitia, veteribus sint anteponendi, ut equis vetulis teneros anteponere solemus. Indigna homine dubitatio! Non enim debent esse amicitiarum sicut aliarum rerum satietates; veterrima quaeque, ut ea vina, quae vetustatem ferunt, esse debet suavissima; verumque illud est, quod dicitur, multos modios salis simul edendos esse, ut amicitiae munus expletum sit.</p>

                <p>Figgeri, inquam, Triari, nullo pacto potest, ut non dicas, quid non probes eius, a quo dissentias. quid enim me prohiberet Epicureum esse, si probarem, quae ille diceret? cum praesertim illa perdiscere ludus esset. Quam ob rem dissentientium inter se reprehensiones non sunt vituperandae, maledicta, contumeliae, tum iracundiae, contentiones concertationesque in disputando pertinaces indignae philosophia mihi videri solent.</p>
            </div>

        </div>

    </div>

</body>
</html>

答案 3 :(得分：0)

对CSS进行以下更改。这将使两个div相对于彼此水平对齐：

CSS：

#main {
   left: 0;
   position: relative;
   top: 0;
}
#content {
    background: none repeat scroll 0 0 black;
    left: 0;
    overflow-x: scroll;
    top: 0;
    width: 100%;
}
#article {
    background: none repeat scroll 0 0 green;
    border: 10px solid yellow;
    box-sizing: border-box;
    float: left;
    font-size: 25px;
    height: 100%;
    position: relative;
    text-align: left;
    width: 50%;
}
#comments {
   background: none repeat scroll 0 0 blue;
   border: 10px solid red;
   box-sizing: border-box;
   float: left;
   font-size: 25px;
   position: relative;
   text-align: left;
   width: 50%;
}

答案 4 :(得分：0)

试试这个。它使每个框具有相等的宽度（通过CSS中定义的50％宽度），您可以将2000px更改为您想要的任何屏幕尺寸。我在测试时把它设为2000px给了我一个滚动的理由，因为2000超过了我的屏幕宽度。

<html>
<title>x</title>
<head>
<style>
body { margin:0; padding:0; color:white; background:transparent; }
#main {width:2000px;}
#article {border:10px solid yellow; float:left; width:50%; height:100%; box-sizing: border-box; font-size:25px; text-align:left; -webkit-column-width: 300px; -webkit-column-gap: 40px; -moz-column-width: 300px; -moz-column-gap: 40px; column-width: 300px; column-gap: 40px; background:green; }
#comments {border:10px solid red; float:right; width:50%; height:100%; box-sizing: border-box; font-size:25px; text-align:left; -webkit-column-width: 300px; -webkit-column-gap: 40px; -moz-column-width: 300px; -moz-column-gap: 40px; column-width: 300px; column-gap: 40px; background:blue; }
</style>
</head>
<body>
<div id="main">
<div id="article"><p>dsgkhskgshgk</p><p>dkjghskgdhskgh</p></div>
<div id="comments"><p>dsgkhskgshgk</p><p>dkjghskgdhskgh</p></div>
</div>
</body>
</html>
相关问题
最新问题