调整容器宽度并使其可调整大小

时间：2017-03-10 15:46:16

标签： html css html5

我想在其中创建一个包含源代码的对手。我现在遇到的问题是我的容器的width变大了，我不知道如何改变它。

以下是 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 {
	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 {
    overflow-x: auto;
}
    <!doctype html>
    
    <html>
    	
    <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>
    	<h1>HTML & CSS Examples</h1>
    </header>
    
    
    <article>
    
    	<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.
    	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.
    	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>
    
    	<fieldset><legend>HTML</legend>
    	<div class="div_content">
    
    <pre><code>&lt;header&gt;
    	&lt;h1&gt;HTML Examples&lt;/h1&gt;
    &lt;/header&gt;
    
    &lt;article&gt;
    
    	&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.
    	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.
    	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;
    	
    </code></pre>
    
    	</div>
    	</fieldset>
    
    </article>
    
    </body>
    </html>

我尝试了一些但没有成功的事情，正如您在 css-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文件时，您将看到容器及其周围的字段集。两者都比它自己的文章更大。如何解决这个问题？

我希望这个容器总是在文章中，即使我切换浏览器的大小。

2 个答案:

答案 0 :(得分：1)

尝试使用vw（viewwidth）值设置宽度而不是em。这将使大小可以调整...如果您可以设置此宽度的限制，只需将max-width：100％;尊重父母的最大宽度。

答案 1 :(得分：0)

您的问题与char *p2 = reinterpret_cast<char *>( t ); 标记有不同的行为有关。

我能建议你使用的最好的事情是：

<code>

它使你的代码元素的宽度有限，但我认为没有办法包装它的行。所以你可以使这个可滚动。

相关问题
最新问题