0
私の<h2>ヘッダーの1つに問題があります。私はそれらのすべてのために単一のスタイルを使用していますが、適切に動作していない特定のヘッダーがあります。ヘッダーがあまりにも遠くに伸びる
ここに私の全体のソースコードである[スクリーンショット添付]：
<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="Description">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="geo.placename" content="United States" />
<meta name="geo.position" content="x;x" />
<meta name="geo.region" content="usa" />
<meta name="ICBM" content="x,x" />
<meta property="og:title" content="Title"/>
<meta property="og:type" content="website"/>
<meta property="og:image" content="http://img.example.com/profile/display/mohawkSideView.jpg"/>
<meta property="og:url" content="http://profile.example.com"/>
<meta property="og:site_name" content="Title"/>
<meta property="og:description" content="Description"/>
<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="http://profile.example.com">
<meta name="twitter:title" content="Title">
<meta name="twitter:description" content="Description">
<meta name="twitter:image" content="http://img.example.com/profile/display/mohawkSideView.jpg">
<link rel="shortcut icon" href="http://img.example.com/profile/display/mohawkSideView.jpg" />
<link rel="apple-touch-icon" href="http://img.example.com/profile/display/mohawkSideView.jpg"/>
<link rel="icon" href="http://img.example.com/profile/display/mohawkSideView.jpg"/>
<link rel="stylesheet" href="http://profile.example.com/css/universal.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://profile.examle.com/js/ezslide.js" type="text/javascript"></script>
<script src="http://profile.example.com/js/equalHeight.js" type="text/javascript"></script>
</head>
<body>
<div id="profile-container">
<div id="profile-left" class="profile-column">
<div id="profile-image">
<img src="http://img.example.com/profile/display/mohawkSideView.jpg" alt="Jesse Toxik">
</div>
<div id="profile-info">
<ul>
<li><span>.</span> <b>Name:</b> Name</li>
<li><span>S</span> <b>Relationship:</b> X</li>
<li><span>;</span> <b>Birthday:</b> 02/05/1991</li>
<li><span>:</span> <b>Age:</b> 25</li>
<li><span>u</span> <b>Location:</b> City/State</li>
<li><span>t</span> <b>Zodiac:</b> Aquarius</li>
<li><span>^</span> <b>Occupation:</b> PEVO</li>
<li><span>r</span> <b>Xbox:</b> Screen Name</li>
</ul>
</div> </div>
<div id="profile-right" class="profile-column">
<h2>Wednesday - Jun 15, 2016</h2>
<h1><b>[</b> Username <b>]</b></h1>
<h2>Welcome To My Domain</h2>
<div id="profile-status" class="profile-section">
<i>?</i> <b>Status:</b>
<p>
Status not available.
</p> </div>
<div id="profile-quote" class="profile-section">
<i>?</i> <b>Favorite Quotes:</b>
<ul id="profile-quote-rotator">
<li>One Persons Craziness Is Another Mans Reality - <u>Tim Burton</u></li>
<li>Every man is guilty of all the good he did not do. - <u>Voltaire</u></li>
<li>Thou shall not bow down before any graven image. - <u>Pinhead (Hellraiser II)</u></li>
<li>The scariest monsters are the ones that lurk within our souls. - <u>Edgar Allen Poe</u></li>
<li>If you have a quality, be proud of it. Let it define you, whatever it is. - <u>Pinhead (Hellraiser)</u></li>
</ul> </div>
<div id="profile-about" class="profile-section">
<h2>Who I Am</h2>
<p>
<a href="#">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Praesent vehicula rhoncus viverra. Pellentesque eleifend scelerisque neque et porta. Nullam sem sapien, tempor a laoreet eu, pulvinar at dolor. Ut ullamcorper blandit felis, ac tempor enim porta sed. Suspendisse est enim, accumsan sit amet interdum ut, convallis et lacus. Sed lobortis eget magna nec tristique. Donec ante quam, tincidunt eget tortor vitae, mollis ullamcorper arcu. Nulla facilisi. Phasellus lobortis molestie maximus. Etiam tellus nunc, pellentesque eu mattis a, consectetur at neque. Ut quam nisi, dapibus at accumsan in, pulvinar vitae sem. Maecenas vitae mattis risus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula rhoncus viverra. Pellentesque eleifend scelerisque neque et porta. Nullam sem sapien, tempor a laoreet eu, pulvinar at dolor. Ut ullamcorper blandit felis, ac tempor enim porta sed. Suspendisse est enim, accumsan sit amet interdum ut, convallis et lacus. Sed lobortis eget magna nec tristique. Donec ante quam, tincidunt eget tortor vitae, mollis ullamcorper arcu. Nulla facilisi. Phasellus lobortis molestie maximus. Etiam tellus nunc, pellentesque eu mattis a, consectetur at neque. Ut quam nisi, dapibus at accumsan in, pulvinar vitae sem. Maecenas vitae mattis risus.
</p> </div>
<div id="profile-likes" class="profile-section">
<h2>Things I Like</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula rhoncus viverra. Pellentesque eleifend scelerisque neque et porta. Nullam sem sapien, tempor a laoreet eu, pulvinar at dolor. Ut ullamcorper blandit felis, ac tempor enim porta sed. Suspendisse est enim, accumsan sit amet interdum ut, convallis et lacus. Sed lobortis eget magna nec tristique. Donec ante quam, tincidunt eget tortor vitae, mollis ullamcorper arcu. Nulla facilisi. Phasellus lobortis molestie maximus. Etiam tellus nunc, pellentesque eu mattis a, consectetur at neque. Ut quam nisi, dapibus at accumsan in, pulvinar vitae sem. Maecenas vitae mattis risus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula rhoncus viverra. Pellentesque eleifend scelerisque neque et porta. Nullam sem sapien, tempor a laoreet eu, pulvinar at dolor. Ut ullamcorper blandit felis, ac tempor enim porta sed. Suspendisse est enim, accumsan sit amet interdum ut, convallis et lacus. Sed lobortis eget magna nec tristique. Donec ante quam, tincidunt eget tortor vitae, mollis ullamcorper arcu. Nulla facilisi. Phasellus lobortis molestie maximus. Etiam tellus nunc, pellentesque eu mattis a, consectetur at neque. Ut quam nisi, dapibus at accumsan in, pulvinar vitae sem. Maecenas vitae mattis risus.
</p> </div>
<div id="profile-dislikes" class="profile-section">
<h2>Things I Do Not Like</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula rhoncus viverra. Pellentesque eleifend scelerisque neque et porta. Nullam sem sapien, tempor a laoreet eu, pulvinar at dolor. Ut ullamcorper blandit felis, ac tempor enim porta sed. Suspendisse est enim, accumsan sit amet interdum ut, convallis et lacus. Sed lobortis eget magna nec tristique. Donec ante quam, tincidunt eget tortor vitae, mollis ullamcorper arcu. Nulla facilisi. Phasellus lobortis molestie maximus. Etiam tellus nunc, pellentesque eu mattis a, consectetur at neque. Ut quam nisi, dapibus at accumsan in, pulvinar vitae sem. Maecenas vitae mattis risus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula rhoncus viverra. Pellentesque eleifend scelerisque neque et porta. Nullam sem sapien, tempor a laoreet eu, pulvinar at dolor. Ut ullamcorper blandit felis, ac tempor enim porta sed. Suspendisse est enim, accumsan sit amet interdum ut, convallis et lacus. Sed lobortis eget magna nec tristique. Donec ante quam, tincidunt eget tortor vitae, mollis ullamcorper arcu. Nulla facilisi. Phasellus lobortis molestie maximus. Etiam tellus nunc, pellentesque eu mattis a, consectetur at neque. Ut quam nisi, dapibus at accumsan in, pulvinar vitae sem. Maecenas vitae mattis risus.
</p> </div>
<div id="profile-music" class="profile-section">
<h2>Music That Tickles My Fancy</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula rhoncus viverra. Pellentesque eleifend scelerisque neque et porta. Nullam sem sapien, tempor a laoreet eu, pulvinar at dolor. Ut ullamcorper blandit felis, ac tempor enim porta sed. Suspendisse est enim, accumsan sit amet interdum ut, convallis et lacus. Sed lobortis eget magna nec tristique. Donec ante quam, tincidunt eget tortor vitae, mollis ullamcorper arcu. Nulla facilisi. Phasellus lobortis molestie maximus. Etiam tellus nunc, pellentesque eu mattis a, consectetur at neque. Ut quam nisi, dapibus at accumsan in, pulvinar vitae sem. Maecenas vitae mattis risus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula rhoncus viverra. Pellentesque eleifend scelerisque neque et porta. Nullam sem sapien, tempor a laoreet eu, pulvinar at dolor. Ut ullamcorper blandit felis, ac tempor enim porta sed. Suspendisse est enim, accumsan sit amet interdum ut, convallis et lacus. Sed lobortis eget magna nec tristique. Donec ante quam, tincidunt eget tortor vitae, mollis ullamcorper arcu. Nulla facilisi. Phasellus lobortis molestie maximus. Etiam tellus nunc, pellentesque eu mattis a, consectetur at neque. Ut quam nisi, dapibus at accumsan in, pulvinar vitae sem. Maecenas vitae mattis risus.
</p> </div> </div>
<div id="profile-gallery">
<div id="profile-gallery-images">
<h2>Eye Candy</h2>
<a href="img.jpg">
<img src="img.jpg" alt="ALT TEXT">
</a>
<a href="#">
<img src="img.jpg" alt="ALT TEXT">
</a>
<a href="#">
<img src="img.jpg" alt="ALT TEXT">
</a>
<a href="#">
<img src="img.jpg" alt="ALT TEXT">
</a>
<a href="#">
<img src="img.jpg" alt="ALT TEXT">
</a>
<a href="#">
<img src="img.jpg" alt="ALT TEXT">
</a>
<a href="#">
<img src="img.jpg" alt="ALT TEXT">
</a>
<a href="#">
<img src="img.jpg" alt="ALT TEXT">
</a>
</div> </div>
<div id="profile-footer">
<h2>© 2015</h2> </div>
</div>
そして、[簡単に編集するためにPHPが含まれている]私のCSS：
header("Content-type: text/css; charset: UTF-8");
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
function hex2rgb($hex) {
$hex = str_replace("#", "", $hex);
if(strlen($hex) == 3) {
$r = hexdec(substr($hex,0,1).substr($hex,0,1));
$g = hexdec(substr($hex,1,1).substr($hex,1,1));
$b = hexdec(substr($hex,2,1).substr($hex,2,1));
} else {
$r = hexdec(substr($hex,0,2));
$g = hexdec(substr($hex,2,2));
$b = hexdec(substr($hex,4,2));
}
$rgb = array($r, $g, $b);
return implode(",", $rgb); // returns the rgb values separated by commas
}
date_default_timezone_set('America/New_York');
if(date('w') == 0) { // Sunday - Orange
$mainColorHex = "#ff6400";
}
if(date('w') == 1) { // Monday - Red
$mainColorHex = "#ff0000";
}
if(date('w') == 2) { // Tuesday - Lime Green
$mainColorHex = "#32cd32";
}
if(date('w') == 3) { // Wednesday - Neon Blue
$mainColorHex = "#67c8ff";
}
if(date('w') == 4) {
$mainColorHex = "#a020f0"; // Thursday - Purple
}
if(date('w') == 5) { // Friday - Yellow
$mainColorHex = "#ffff00";
}
if(date('w') == 6) { // Saturday - Light Gray
$mainColorHex = "#787878";
}
if(date('z') + 1 == 304) { // Halloween - Halloween Orange
$mainColorHex = "#ff9100";
}
$mainColorRGB = hex2rgb($mainColorHex);
?>
@import url('http://fonts.example.com/custom.css');
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
font-style: normal;
font-family: Helvetica;
}
body {
background-color: #212121;
background-image: url('');
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
color: #fff;
text-align: center;
}
h1, h2, h3, h4, h5, h6 {
font-family: Orbitron;
margin-bottom: 5px;
}
h1, h2 {
text-align: center;
}
h1 {
padding: 10px;
padding-top: 15px;
font-size: 45px;
line-height: 50px;
font-variant: small-caps;
}
h2 {
text-align: center;
margin: 0 auto;
text-transform: uppercase;
display: table;
white-space: nowrap;
color: <?php echo $mainColorHex; ?>;
font-size: 16pt;
}
h2:before,
h2:after {
border-top: 2px solid #565656;
content: '';
display: table-cell;
position: relative;
top: 0.5em;
width: 45%;
}
h2:before {
right: 1.5%;
}
h2:after {
left: 1.5%;
}
i {
font-family: WebSymbolsLiga;
}
b {
color: <?php echo $mainColorHex; ?>;
}
u {
color: <?php echo $mainColorHex; ?>;
font-style: normal!important;
font-weight: bold;
}
p {
text-indent: 20px;
margin-bottom: 10px;
}
a:link, a:visited {
color: <?php echo $mainColorHex; ?>;
}
a:hover {
text-decoration: underline;
}
#profile-container {
width: 1040px;
margin: 0 auto;
padding: 20px;
display: block;
display: inline-block;
text-align: left;
background: #000;
}
#profile-left {
width: 300px;
float: left;
border-right: 1px solid #565656;
}
#profile-right {
width: 689px;
float: right;
padding-left: 20px;
padding-right: 20px;
}
#profile-image {
text-align: center;
margin-bottom: 5px;
}
#profile-image img {
width: 244px;
height: 244px;
border: 3px solid #565656;
}
#profile-info {
font-family: Helvetica;
width: 250px;
margin: 0 auto;
}
#profile-info > ul > li {
border: 1px solid <?php echo $mainColorHex; ?>;
margin-bottom: 10px;
padding: 5px;
border-radius: 10px;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
background: -moz-linear-gradient(top, rgba(<?php echo $mainColorRGB; ?>,1) 0%, rgba(255,191,150,0) 59%, rgba(255,255,255,0) 100%);
background: -webkit-linear-gradient(top, rgba(<?php echo $mainColorRGB; ?>,1) 0%,rgba(255,191,150,0) 59%,rgba(255,255,255,0) 100%);
background: linear-gradient(to bottom, rgba(<?php echo $mainColorRGB; ?>,1) 0%,rgba(255,191,150,0) 59%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='<?php echo $mainColorHex; ?>', endColorstr='#00ffffff',GradientType=0);
}
#profile-info > ul > li > span {
font-family: WebSymbolsLiga;
}
#profile-info > ul > li > i {
color: <?php echo $mainColorHex; ?>;
font-weight: bold;
}
.profile-section {
margin-bottom: 10px;
}
#profile-quote-rotator {
height: 18px;
line-height: 18px;
font-size: 16px;
}
#profile-quote-rotator > li {
text-indent: 30px;
font-style: Italic;
text-transform: capitalize;
}
#profile-gallery {
clear: both;
clear: all;
text-align: center;
}
#profile-gallery-images > a > img {
width: 200px;
height: 200px;
margin: 10px;
}
#profile-footer {
clear: both;
clear: all;
text-align: center;
}
そしてスクリーンショット：
著作権のヘッダーは、「目の保養」のアプリケーション耳。両側に隙間があります。なぜ彼らが同じではないのか分かりません。
これを解決しやすくするために私の全構造コードを含めました。
ありがとうございます。具体的にh2に幅を追加
ブロック要素である 'h2'は、その全幅に拡張されます。あなたの "著作権"見出しは、その幅を制限する 'div'の中にラップされています。あなたの "目の飴"の見出しに同じ種類の "ラッパー"を提供する必要があります。 –
このコードは 'h2'の後ろの行の幅を制限するという印象を受けました。 ' h2：before、 h2：{ border-top：2px solid＃565656; 内容： ''; display：table-cell; 位置：相対; top：0.5em; 幅：45％; } h2：{ の前：1.5％;左：1.5％; } ' –
簡単なデバッグのためにライブデモを投稿 –