个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
26
4
大家好，我需要 CSS 方面的帮助。我不知道如何使我的 html 模板适合浏览器窗口。看图
这就是未调整大小的样子:
http://s28.postimg.org/j2qkmmlqz/Untitled1.jpg
这就是调整后的样子
这是CSS
@charset "utf-8";
/* CSS Document */
body {
width:auto;
font: Trebuchet MS;
background: #E6E6E6;
}
h1{
font: Trebuchet MS;
}
#visainfo1 {
float: left;
width: 60%;
padding-left: 50px;
}
#visainfo2 {
float: right;
width: 30%;
padding-right: 50px;
}
#info1 {
margin-bottom: 15px;
padding: 8px;
background-color: white;
}
#info2 {
margin-bottom: 15px;
padding: 8px;
background-color: white;
float: left;
width: 45%;
}
#info3 {
margin-bottom: 15px;
padding: 8px;
background-color: white;
float: right;
width: 45%;
}
#info4 {
margin-bottom: 15px;
padding: 8px;
background-color: white;
}
#info5 {
margin-bottom: 15px;
padding: 8px;
background-color: white;
}
footer{
clear: both;
margin-bottom: 0;
}
HTML
<!DOCTYPE html>
<html lang="lt">
<title>Darbelis</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<body>
<div id="visavisa">
<header id="banner">
<h1>The Site</h1>
</header>
<nav id="menu_virsut">
<ul>
<li><a href >menu link</a></li>
<li><a href >menu link</a></li>
<li><a href >menu link</a></li>
</ul>
</nav>
<section id="visainfo1">
<section id="info1">
<h2>Aenean ac diam nec neque fringilla</h2>
<p>Integer eget mauris et urna pulvinar consectetur hendrerit eget mauris. Praesent a interdum justo. Aenean ac diam nec neque fringilla cursus. Donec iaculis tortor in nunc vehicula dfdftrum. Integer malesuada mollis ligula at varius</p>
<p>Integer eget mauris et urna pulvinar consectetur hendrerit eget mauris. Praesent a interdum justo. Aenean ac diam nec neque fringilla cursus. Donec iaculis tortor in nunc vehicula rutrum. Integer malesuada mollis ligula at variu</p>
</section>
<section id="info2">
<p>Integer eget mauris et urna pulvinar consectetur hendrerit eget mauris. Praesent a interdum justo. Aenean ac diam nec nequeringilla cursus. Donec iaculis tortor in nunc vehicula rutrum. Integer malesuada mollis ligula at varius. Dorce pila meracone.</p>
</section>
<section id="info3">
<p>Integer eget mauris et urna pulvinar consectetur hendrerit eget mauris. Praesent a interdum justo. Aenean ac diam nec nequeringilla cursus. Donec iaculis tortor in nunc vehicula rutrum. Integer malesuada mollis ligula at varius. Dorce pila meracone.</p>
</section>
</section>
<section id="visainfo2">
<section id="info4">
<h2>New site!</h2>
<p>Welcome to our new website. Please have a look around, any feedback is much appreciated.</p>
</section><!---Uzdaro side bar item---->
<section id="info5">
<form action="MAILTO:.com" method="post" enctype="text/plain">
First name:<br>
<input type="text" name="name" value=""><br>
Last name:<br>
<input type="text" name="mail" value=""><br>
Messege:<br>
<input name="comment" type="text" value="" size="30"><br><br>
<input type="submit" value="Send">
</form>
</section>
</section>
<footer>
<nav id="menu_foot">
<ul>
<li>menu link</li>
<li>menu link</li>
<li>menu link</li>
<li>menu link</li>
<li>menu link</li>
<li>menu link</li>
</ul>
</nav>
<p id="footer_text">Nullam mattis luctus dolor, sed gravida tellus volutpat vel. Maecenas mollis augue sed tortor molestie ornare. Proin dapibus dictum eros ut adipiscing. Nullam ultrices dolor ut tristique sollicitudin. Integer scelerisque urna est, sit amet aliquet sapien accumsan quis. Nullam luctus semper vulputate. Nulla egestas urna nec tellus ultrices elementum. Proin dapibus dictum eros ut adipiscing. Nullam ultrices dolor ut tristique sollicitudin. Integer scelerisque</p>
</footer>
</div>
</body>
</html>
我该如何解决？
最佳答案
发生这种情况是因为您的填充以像素为单位，但您的宽度以百分比为单位，就像评论中提到的@RomainBraun。
要解决此问题，您可以将填充更改为百分比。我在 codepen 中完成了此操作:codepen.io/anon/pen/ZGyPeY并且您可以看到它“挤压”而没有下降到另一条线。
例子:
#visainfo1 {
float: left;
width: 60%;
padding-left: 2%; //Percentage of the parent container's width!
}
将百分比调整到 div 的总宽度及其水平填充小于 100% 的位置，你应该会很好。
关于HTMLS/CSS 窗口大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30812206/
26
4
0
大家好，我需要 CSS 方面的帮助。我不知道如何使我的 html 模板适合浏览器窗口。看图 这就是未调整大小的样子: http://s28.postimg.org/j2qkmmlqz/Untitled
我有一个 Django 的“模板化”问题 如果我在 views.py 中有: def cv(request): if request.user.is_authenticated(): cv
我有这样的设计: 有一个核心部分使用 REST 在其上运行 Spring。 还有另一部分有一个 Tomcat 服务器，只有 HTML 文件(不是 jsp 或其他任何东西。)所以如果我想在 tomcat
因此，当我键入 npm run generate 时，Nuxt 会将我的项目生成到 dist 文件夹中。在该文件夹中，我可以找到一个名为 _nuxt 的文件夹，其中包含 .js 文件和 index.h
在进行 AJAX 调用后，我需要将事件呈现为 HTML 表。成功后我会得到表 HTMLS。但是当它以标题呈现时，它会将表 HTMLS 显示为普通文本。当我用谷歌搜索时，我找到了一个解决方案，我需要使用
更新:非常抱歉没有说清楚。它是 jQuery 中的 load()，而不是 loadpage()。 也许这是一个微不足道的问题，但作为 js 的新手，我就是想不通。非常感谢您的帮助。 我正在构建一个小型
HTML 的类比是什么？用于添加外部 javascript 的标记，将 C# 脚本添加到 XAML？ 最佳答案 它的工作方式并不完全相同。您可以使用 Silverlight 的 Javascript
我想知道是否有任何 Grunt 任务可以将类的名称更改为唯一的名称？ 例如.container -> .uniqueName_container 或只是一些随机字母或数字，如 google:.cont
我是一名优秀的程序员,十分优秀！