1. ホーム
  2. 質問と答え
  3. コンテナの幅を調整してサイズを変更できるようにする

コンテナの幅を調整してサイズを変更できるようにする

2017-03-10 14 views
1

ソースコードを含むcontrainerを作成したいと考えています。私が今問題にしているのは、私のコンテナのwidthが大きくなり、それをどのように変更するのか分からないということです。ここでコンテナの幅を調整してサイズを変更できるようにする

は、あなたが私のCSSで見ることができるように私は、いくつかのことを試みたが成功せずHTMLファイルには...私が使用しようとしていますある

body { 
 
    font-family: Tahoma, Verdana, sans-serif; 
 
    font-size: 1em; 
 
    color: DarkGray; 
 
    max-width: 80%; 
 
    margin: 1em auto; 
 
    background: LightGray; 
 
} 
 

 
header { 
 
    position:relative; 
 
    color: white; 
 
    background: blue; 
 
} 
 

 
h1 { 
 
\t font-size: 6em; 
 
\t text-align:center; 
 
\t margin: 0; 
 
} 
 

 
article { 
 
\t display: block; 
 
\t margin:.5em 0; 
 
\t background: white; 
 
\t padding:.5em 1em; 
 
\t min-height:21em; 
 
} 
 

 
fieldset { 
 
\t border-radius: .4em; 
 
\t border-style: groove; 
 
\t border-color: blue; 
 
\t color: blue; 
 
\t /* display: inline-block; */ 
 
\t /*max-width: 75em;*/ 
 
\t padding: 0 1em; \t 
 
\t /*position: relative;*/ 
 
\t /*width: 100%;*/ 
 
} 
 

 
div { 
 
\t /*position: relative;*/ 
 
\t max-width: 75em; 
 
} 
 

 
code { 
 
\t color: black; 
 
} 
 

 
header, article { 
 
\t -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); 
 
\t -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); 
 
\t box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); 
 
} 
 

 
.div_content { 
 
    overflow-x: auto; 
 
}
<!doctype html> 
 
    
 
    <html> 
 
    \t 
 
    <head> 
 
    
 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    
 
    <title>HTML & CSS Examples</title> 
 
    
 
    <link rel="stylesheet" href="styles/example.css"> 
 
    
 
    </head> 
 
    
 
    <body> 
 
    
 
    <header> 
 
    \t <h1>HTML & CSS Examples</h1> 
 
    </header> 
 
    
 
    
 
    <article> 
 
    
 
    \t <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
 
    \t Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
 
    \t Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 
 
    
 
    \t <fieldset><legend>HTML</legend> 
 
    \t <div class="div_content"> 
 
    
 
    <pre><code>&lt;header&gt; 
 
    \t &lt;h1&gt;HTML Examples&lt;/h1&gt; 
 
    &lt;/header&gt; 
 
    
 
    &lt;article&gt; 
 
    
 
    \t &lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
 
    \t Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
 
    \t Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.&lt;/p&gt; 
 
    
 
    &lt;/article&gt; 
 
    \t 
 
    </code></pre> 
 
    
 
    \t </div> 
 
    \t </fieldset> 
 
    
 
    </article> 
 
    
 
    </body> 
 
    </html>

-file ...

body { 
    font-family: Tahoma, Verdana, sans-serif; 
    font-size: 1em; 
    color: DarkGray; 
    max-width: 80%; 
    margin: 1em auto; 
    background: LightGray; 
} 

header { 
    position:relative; 
    color: white; 
    background: blue; 
} 

h1 { 
    font-size: 6em; 
    text-align:center; 
    margin: 0; 
} 

article { 
    display: block; 
    margin:.5em 0; 
    background: white; 
    padding:.5em 1em; 
    min-height:21em; 
} 

fieldset { 
    border-radius: .4em; 
    border-style: groove; 
    border-color: blue; 
    color: blue; 
    /* display: inline-block; */ 
    /*max-width: 75em;*/ 
    padding: 0 1em; 
    /*position: relative;*/ 
    /*width: 100%;*/ 
} 
div { 
/*position: relative;*/ 
max-width: 75em; 
} 
code { 
    color: black; 
} 

header, article { 
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); 
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); 
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); 
} 

.div_content { 
/*max-width: 75em;*/ 
    overflow-x: auto; 
}

私がもっとも成功したmax-width: 75em;ですが、フルスクリーンモードのみで、コンテナはサイズ変更可能ではありません。

このhtmlファイルを実行すると、コンテナとその周辺のフィールドセットが表示されます。どちらも自己よりも大きい記事です。これを修正するには？

ブラウザのサイズを切り替えても、このコンテナを常に記事の中に入れたいと思います。

出典

2017-03-10 suleiman

+0

フィディーズまたはコードスニペットを作成すると、簡単に手助けできます。 –

+0

これまでにこれをやったことはありません、ヒントありがとう！ – suleiman

+0

ありがとうございます。私の答えを見てください。私はそれが助けると思う。 –

答えて

1

emの代わりにvw（viewwidth）の値を使って幅を設定してみてください。これはサイズを変更可能にします。この幅に制限を設定できる場合は、max-width：100％を入力してください。親の最大幅を考慮してください。

出典

2017-03-10 16:13:17 felipekrust

0

あなたの問題は<code>タグの動作が異なります。

私はあなたがこれを使用しているお勧めできる最善のこと：

code{ 
    display: inline-block; 
    over-flow: scroll; 
    width: 90%; 
}

それはあなたのコード要素のための限られた幅になり、しかし、私はその行をラップする方法はありませんだと思う??。あなたはこれをスクロール可能にすることができます。

出典

2017-03-10 16:01:50

関連する問題

 関連する問題