0
페이지 오른쪽의 이동하지 않는 헤더 아래에 공백이 표시됩니다. 오른쪽 텍스트 상자를 거의 모든 방법으로 오른쪽으로 가고 싶습니다. 이것은 내가 취하는 HTML 클래스를위한 것이지 진짜 장소는 아닙니다. 클래스를 만드는 방법에 대한 제안 사항은 화면 오른쪽으로 계속 이동합니까?HTML 및 CSS로 생성 된 웹 페이지의 추가 공간
대단히 감사합니다.
HTML
CSS
/* site.css */
body {
background-color: #D4AD6A
}
html, body {
padding: 0 auto;
margin: 0 auto;
height: 100%;
width: 100%;
}
header{
\t color: #256E5D;
\t background-color: #805815;
\t height: 100px;
}
footer {
text-align: center;
margin-left: 40%;
padding: 15px;
}
nav {
float: right;
margin-right: 10px
}
nav li{
display: inline;
}
td,th {
border: 1px solid black;
}
table {
border-spacing: 0px
}
.main {
font-family: times-new roman;
color: yellow;
}
.title {
color: #3B3176;
font-size: 48px;
font-family: 'Times New Roman', Times, serif;
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.header-image {
margin-left: 20px;
margin-top: -50px;
}
ul.a {
list-style-type: none
}
.products_inline{
font-size: 36px;
color: yellow;
width: 50px;
display: inline-block;
vertical-align: top;
width: 20%;
}
a.prod_inline:link{
\t color: yellow;
\t font-size: 36px;
}
a.prod_inline:visited {
\t color: yellow;
\t font-size: 36px;
}
.inline {
display: inline-block;
text-align: center;
margin: auto;
width: 60%;
/*border: 3px solid black;*/
}
.right {
display: inline-block;
text-align: right;
width: 125px;
vertical-align: top;
margin-top: 15px;
border: 2px solid black;
}
.rightform {
float: right;
}
.flex{
display: flex;
}
.centerform{
display: flex;
flex-direction: column;
width: 320px;
font-family: Arial;
color: yellow;
/*border: solid black 3px;*/
}
.page_grids{
display: inline-block;
text-align: left;
}
table {
width: 700px;
margin-top: 25px;
border: solid black 1px;
border-spacing: 0px
}<!doctype html>
<html lang="en">
<head>
\t <title>Uncle's Bait and Tackle Shop Rods</title>
\t <link rel="stylesheet" href="css/baitstyle.css">
</head>
<body>
\t <section class="main">
\t <div>
\t \t <header>
\t \t \t <div class="title">Uncle's bait and tackle shop</div>
\t \t \t <!--<div style="margin-left: 94%"><a href="about_us.html">About Us</a></div>-->
\t \t <nav>
\t \t <ul>
\t \t <li><a href="final.html">Home</a></li>
\t \t <li><a href="about_us.html">About Us</a></li>
\t \t </ul>
\t </nav>
\t \t \t <img src="img/bass1.jpg" class="header-image" />
\t \t </header>
\t </div>
\t <div class="products_inline">
\t <ul class="a">
\t \t \t <li><a href="rods.html" class="prod_inline">Rods</a></li>
\t \t \t <li><a href="lures.html" class="prod_inline">Lures</a></li>
\t \t \t <li>Terminal <br> Tackle</li>
\t \t \t <li>Clothing</li>
\t </ul></div>
\t </div>
\t <div class="inline">
\t \t <table class="page_grids">
\t \t \t <thead>
\t \t \t \t <th colspan="2" height: 25px>[MAKE LARGER, CENTER, USE CSS]Rods</th>
\t \t \t \t <tr><td>Spinning Image</td><td>Our large selection of spinning rods</td></tr>
\t \t \t \t <tr><td>Spin Casting Image</td><td>Our selection of spin casting rods are perfect
for the novice angler and masters alike</td></tr>
\t \t \t \t <tr><td>Baitcasting Image</td><td>Our selection of baitcasters are perfect for
those that need precision casting</td></tr>
\t \t \t \t <tr><td>Specialty Rods Image</td><td>Our selection of specialty rods will meet
your needs for those species specific targets such as salmon or sturgeon</td></tr>
\t \t \t </thead>
\t \t </table>
\t </div>
\t <div class="right">Right side text will this wrap or keep going Right side text will this wrap or keep
going Right side text will this wrap or keep going </div>
\t </section>
\t </body>
</html>
, 당신이 사용할 수있는'플로트 : right'. 그래도 스펙을 읽으십시오. 안절부절 못함! 어쨌든, 지금 배치의 이유는 60 % 너비 인 다른 인라인 블록 오른쪽의 인라인 블록이므로 오른쪽 공간이 창에 따라 다릅니다. 아, 화면이 좁 으면 테이블이 "인라인"div에서 오버플로되어 "오른쪽"div가 테이블 위에 오게됩니다. –
감사합니다. 그건 의미가 있습니다. 오버플로를 허용하지 않겠습니까? – edpietrzak
물론 [overflow] (https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) 속성! –