divとCSSを整列させるのに助けが必要です

これは、ブラウザがやっていることです。

今私は中3の最大値を有するように設定divを持っている「行を。」しかし、divの2行目は最初の行の中で最長で強制されます。私は彼らが私がそれらをしたい場所に行く方法をよく分かりません。何か助けをいただければ幸いです！ここで

は私のコードです：

html { 
 
    overflow: scroll; 
 
    overflow-x: hidden; 
 
    -webkit-appearance: none; 
 
} 
 
::-webkit-scrollbar { 
 
    width: 0vw; 
 
    background: transparent; 
 
} 
 
body { 
 
    font-family: Helvetica; 
 
    text-align: center; 
 
    background-image: url(../Images/background.png); 
 
    background-attachment: fixed; 
 
    margin: 0vw; 
 
    padding: 0vw; 
 
    
 
} 
 
h1 { 
 
    color: transparent; 
 
    background: -webkit-linear-gradient(transparent, transparent), url(../Images/background.png) repeat; 
 
    -webkit-background-clip: text; 
 
    font-size: 2.25vw; 
 
} 
 
h2 { 
 
    font-size: 1.8vw; 
 
} 
 
p { 
 
    font-size: 1.1vw; 
 
} 
 

 
/* ID Section */ 
 
#NavandTitleBar { 
 
    background-color: #ffffff; 
 
    padding: 0.1vw; 
 
    
 
    -webkit-animation: fadein 2s; 
 
    animation: fadein 2s; 
 
    
 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
 
} 
 
#NavandTitleBar nav ul { 
 
    list-style: none; 
 
    padding: 0.01vw; 
 
} 
 
#NavandTitleBar nav ul li a { 
 
    text-decoration: none; 
 
} 
 
#NavandTitleBar nav ul li a h3 { 
 
    cursor: pointer; 
 
    color: transparent; 
 
    background: -webkit-linear-gradient(transparent, transparent), url(../Images/background.png) repeat; 
 
    -webkit-background-clip: text; 
 
    font-size: 1.3vw; 
 
} 
 
#navHome { 
 
    position: absolute; 
 
    left: 4%; 
 
    top: 4%; 
 
} 
 
#navGallery { 
 
    position: absolute; 
 
    left: 12%; 
 
    top: 4%; 
 
} 
 
#navAbout { 
 
    position: absolute; 
 
    right: 12%; 
 
    top: 4%; 
 
} 
 
#navContact { 
 
    position: absolute; 
 
    right: 4%; 
 
    top: 4%; 
 
} 
 

 
#main div{ 
 
    display: inline-block; 
 
    vertical-align: text-top; 
 
    margin: 2vw; 
 
    width: 20vw; 
 
    background-color: white; 
 
    padding: 1vw 3vw; 
 
    text-align: justify; 
 
    border-radius: 0.5vw; 
 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
 
    
 
    -webkit-animation: fadein 2s; 
 
    animation: fadein 2s; 
 
} 
 
#main div p { 
 
    color: #555555; 
 
} 
 
#main div .completionDate { 
 
    color: #999999; 
 
} 
 

 
/* Classes */ 
 
.username { 
 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
 
    background: -webkit-linear-gradient(top, #ffffff 5%, #ffffff 100%); 
 
    background: linear-gradient(to bottom, #ffffff 5%, #ffffff 100%); 
 
    border: 1px solid #bdb6bd; 
 
    cursor: text; 
 
    color: #000000; 
 
    font-size: 1vw; 
 
    padding: 1vw 2vw; 
 
    text-shadow: 0 -1px 0 #ffffff; 
 
    position: relative; 
 
    top: 10vw; 
 
    
 
    -webkit-animation: fadein 2s; 
 
    animation: fadein 2s; 
 
    
 
} 
 
.password { 
 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
 
    background: -webkit-linear-gradient(top, #ffffff 5%, #ffffff 100%); 
 
    background: linear-gradient(to bottom, #ffffff 5%, #ffffff 100%); 
 
    border: 1px solid #bdb6bd; 
 
    cursor: text; 
 
    color: #000000; 
 
    font-size: 1vw; 
 
    padding: 1vw 2vw; 
 
    text-shadow: 0 -1px 0 #ffffff; 
 
    position: relative; 
 
    top: 10.5vw; 
 
    
 
    -webkit-animation: fadein 2s; 
 
    animation: fadein 2s; 
 
} 
 

 
.submitbutton { 
 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
 
    background: -webkit-linear-gradient(top, #ffffff 5%, #ffffff 100%); 
 
    background: linear-gradient(to bottom, #ffffff 5%, #ffffff 100%); 
 
    background-color: #ffffff; 
 
    border-radius: 5px; 
 
    border: 1px solid #bdb6bd; 
 
    cursor: pointer; 
 
    color: rgba(0,0,0,0.4) !important; 
 
    font-size: 1vw; 
 
    padding: 1vw 6.18vw; 
 
    text-shadow: 0 -1px 0 #ffffff; 
 
    position: relative; 
 
    top: 11vw; 
 
    
 
    -webkit-animation: fadein 2s; 
 
    animation: fadein 2s; 
 
} 
 

 
/* Animations */ 
 
@-webkit-keyframes fadein { 
 
    from { opacity: 0; } 
 
    to { opacity: 1; } 
 
} 
 
@keyframes fadein { 
 
    from { opacity: 0; } 
 
    to { opacity: 1; } 
 
}

<!DOCTYPE html> 
 
    <html lang="en"> 
 
     <head> 
 
      <meta charset="UTF-8"> 
 
      <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
      <title>Project Alyssa</title> 
 
      <link rel="stylesheet" href="Resources/CascadingStyleSheet/project_alyssa.css"/> 
 
      <link rel="icon" href="Resources/Images/project_alyssa.ico"/> 
 
      <script src="Resources/JavaScript/project_alyssa.js"></script> 
 
     </head> 
 
     <body> 
 
      <div id="NavandTitleBar"> 
 
       <nav id="leftNav"> 
 
        <ul> 
 
         <li id="navHome"><a href="project_alyssa.html"><h3>Home</h3></a></li> 
 
         <li id="navGallery"><a href="Secondary/gallery.html"><h3>Gallery</h3></a></li> 
 
        </ul> 
 
       </nav> 
 
       <h1>Project Alyssa</h1> 
 
       <nav id="rightNav"> 
 
        <ul> 
 
         <li id="navAbout"><a href="Secondary/about.html"><h3>About</h3></a></li> 
 
         <li id="navContact"><a href="Secondary/contact.html"><h3>Contact</h3></a></li> 
 
        </ul> 
 
       </nav> 
 
      </div> 
 
      <div id="main"> 
 
       <div id="introduction"> 
 
        <h2>Blah</h2> 
 
        <p> 
 
         Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. 
 
        </p> 
 
       </div> 
 
       <div id="hope"> 
 
        <h2>Blah Blah Blah</h2> 
 
         <p> 
 
          Hello World. 
 
         </p> 
 
       </div> 
 
       <div id="theday"> 
 
        <h2>Blah Blah Blah Blah Blah</h2> 
 
        <p> 
 
         Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. Hello World. 
 
        </p> 
 
        <p class="completionDate"> 
 
         Hello World. 
 
        </p> 
 
       </div> 
 
       <div id="ithink"> 
 
        <h2>Blah Blah Blah Blah</h2> 
 
        <p> 
 
         Hello World. 
 
        </p> 
 
       </div> 
 
       <div id="stupidthings"> 
 
        <h2>Blah Blah Blah Blah Blah</h2> 
 
        <p> 
 
         Hello World. 
 
        </p> 
 
       </div> 
 
       <div id="blahblah"> 
 
        <h2>Blah Blah Blah.</h2> 
 
        <p> 
 
         Hello World. 
 
        </p> 
 
       </div> 
 
      </div> 
 
     </body> 
 
    </html>

出典

2016-12-17 Josh Huskey

テーブルの各行にデータがあるhtmlがあり、水平方向の配置について何か質問があるため、問題は明確ではありません。問題を再現可能なコードスニペットまたはjsfiddleにすることはできますか？ – TigOldBitties

@TigOldBittiesコードスニペットを完成させました。以前はそれがなかったのは残念です。 –

スニペットを実行しても問題は発生しません。私はあなたに手を差し伸べようとします。 – TigOldBitties

を、それを必要とする場合は、トンですインラインブロックとして表示された表のセルを使用しているため、達成するためにはうまくいかないことはあなたの構造では起こりません。

divを使用してhtmlを更新すると、最も近いのはdivの浮動小数点の左の動作です。

私の推測では、https://material.angularjs.org/latest/demo/cardのような簡単な方法で列を使用して行うことができます。

So

は、それは3つの列を使用しますが、あなたがそれらをしたいように彼らが流れるので、あなたが順番に各列に1をあなたの項目を追加することができますする必要が多く、またはいくつかの列を、使用することができますthisフィドルを参照してください。

出典

2016-12-17 15:03:43 TigOldBitties

あなたは私が行っていることで100％正しいです。それらをdivや列に変更する作業をするつもりです。ありがとうございました！ –

喜んで、友人。 – TigOldBitties

<table id="homeTable" align="center" > 
...... 
</table>

あなたがタンブラー効果全幅使用中

<table id="homeTable" align="center" style="width:100%" > 
...... 
</table>

出典

2016-12-17 13:53:31

これは質問に答えるかもしれませんが、投稿されたコードレイアウトを依頼されたように変更することはありません。また、なぜ動作しているのか、OPのコードを動作させる方法についての説明もなく、さらにHTML5では 'align'属性がサポートされていません（投稿されたdoctypeはそれを示しています） – LGSon

私はこれを試しても何の効果も見ませんでした。とにかくおかげで。 –

divとCSSを整列させるのに助けが必要です

答えて

関連する問題