0
我想让绿色div'header-text-wrap'中的文字整齐地传播到div的边缘。我知道它可以处理字母间距和字间距命令，但是我担心兼容性，如果我这样做（如果某些浏览器显示的字体大小略有不同，那么文本将不正确地调整大小或添加另一不需要的行）。如果我使用justify命令，只有最上面一行是完全隔开的，但不是下面的行。让文字传播到div的边缘
这可以实现没有一个固定的字宽和字母间距的宽度？
感谢您的帮助
@charset "UTF-8";
/* CSS Document */
body{
\t background-color:#F6F7C1; \t
\t padding:0px;
\t margin:0 auto; /* aligns content to touch the edge; gets rid of default spacing/margin between edge and content */
}
/* Header */
#header-wrap{
\t background:#D6ECFF;
\t width:100%;
\t height:auto;
\t border-bottom: 3px solid #CCC;
\t /* margin:0 auto; needed? */
}
#header-top{
\t /* contains logo & title text */
\t width:960px;
\t height:auto;
\t margin:0 auto; /* aligns centrally */
\t /* the below aligns the divs centrally (vertically & horizontally) */
\t display: flex;
\t justify-content: center;
\t align-items: center;
}
.header-top-content-wrap{
\t width:auto;
\t height:auto;
\t border-bottom:1px solid #ccc;
\t padding:15px 0 10px 0;
\t /* the below aligns the divs centrally (vertically & horizontally) */
\t display: flex;
\t justify-content: center;
\t align-items: center;
}
.header-text-wrap{
\t width:460px;
\t height:auto;
\t text-align:justify;
\t float:left;
\t background:#090;
}
.header-logo-wrap{
\t width:190px;
\t height:100px;
\t text-align:justify;
\t float:left;
\t padding-right:30px;
}
#header-bottom{
\t /* contains navigation menu */
\t width:960px;
\t height:auto;
\t margin:0 auto; /* aligns centrally */
\t padding: 10px 0 10px 0;
\t /* the below aligns the divs centrally (vertically & horizontally) */
\t display: flex;
\t justify-content: center;
\t align-items: center;
}
.header-navigation-link{
\t width:auto;
\t height:auto;
\t float:left;
\t margin-right: 50px;
\t font-size:20px;
\t font-family: Arial, sans-serif, tahoma, Arial, Cambria;
\t -webkit-font-smoothing: antialiased; /* subtley makes fonts smoother */
\t color:#333;
}
.header-navigation-link-end{
\t width:auto;
\t height:auto;
\t float:left;
\t margin-right: 0px;
\t font-size:20px;
\t font-family: Arial, sans-serif, tahoma, Arial, Cambria;
\t -webkit-font-smoothing: antialiased; /* subtley makes fonts smoother */
\t color:#333;
}
/* Fonts */
header{
\t font-family: Arial, sans-serif, tahoma, Arial, Cambria;
\t -webkit-font-smoothing: antialiased; /* subtley makes fonts smoother */
\t font-size:45px;
\t text-transform:uppercase;
\t line-height:40px;
\t color:#000;
}
slogan{
\t font-family: courier new, tahoma, Arial, Cambria, serif;
\t -webkit-font-smoothing: antialiased; /* subtley makes fonts smoother */
\t font-size:20px;
\t text-transform:uppercase;
\t word-spacing:10px;
\t letter-spacing:5px;
\t color:#666;
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css"/>
<!-- Meta Tags Below -->
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>___________________________</title>
<!-- Google Analytics Code Below -->
<!-- _____________________________ -->
</head>
<body>
<!-- Header -->
<!-- #BeginLibraryItem "/Library/header.lbi" -->
<div id="header-wrap">
<div id="header-top">
<div class="header-top-content-wrap">
<div class="header-logo-wrap"><img src="images/logo.jpg" width="190" height="100" alt="logo"/></div>
<div class="header-text-wrap">
<header>first line of text & second line</header>
<slogan>slogan goes here too</slogan>
</div>
</div>
</div>
<div id="header-bottom">
<div class="header-navigation-link">Home</div>
<div class="header-navigation-link">About</div>
<div class="header-navigation-link">Services</div>
<div class="header-navigation-link-end">Contact</div>
</div>
</div>
<!-- #EndLibraryItem -->
<!-- Main -->
<div id="body-wrap">body</div>
</body>
</html>
这可能有所帮助：http://simplefocus.com/flowtype/ – efreeman
字体大小需要固定，文本对齐（底线也有理由） – user3760941