표를 사용하지 않는 간단한 2 열 HTML 레이아웃
웹 페이지에 일부 데이터를 표시하기 위해 두 열 형식을 만드는 매우 쉬운 방법을 찾고 있습니다. 다음과 같은 형식을 어떻게 얻을 수 있습니까?
<table>
<tr>
<td>AAA</td>
<td>BBB</td>
</tr>
</table>
나는 HTML5 / CSS3 기술에도 열려 있습니다.
<style type="text/css">
#wrap {
width:600px;
margin:0 auto;
}
#left_col {
float:left;
width:300px;
}
#right_col {
float:right;
width:300px;
}
</style>
<div id="wrap">
<div id="left_col">
...
</div>
<div id="right_col">
...
</div>
</div>
열 너비의 합이 랩 너비와 같은지 확인하십시오. 또는 너비에 백분율 값을 사용할 수도 있습니다.
CSS를 사용하는 기본 레이아웃 기술에 대한 자세한 내용은이 튜토리얼을 참조하십시오.
글쎄, 당신은 html 테이블 대신 CSS 테이블을 할 수 있습니다. 이것은 당신의 html을 의미 적으로 올바로 유지하지만 레이아웃 목적으로 테이블을 사용할 수 있도록합니다.
이것은 플로트 해킹을 사용하는 것보다 더 의미가있는 것 같습니다.
<html>
<head>
<style>
#content-wrapper{
display:table;
}
#content{
display:table-row;
}
#content>div{
display:table-cell
}
/*adding some extras for demo purposes*/
#content-wrapper{
width:100%;
height:100%;
top:0px;
left:0px;
position:absolute;
}
#nav{
width:100px;
background:yellow;
}
#body{
background:blue;
}
</style>
</head>
<body>
<div id="content-wrapper">
<div id="content">
<div id="nav">
Left hand content
</div>
<div id="body">
Right hand content
</div>
</div>
</div>
</body>
</html>
이 질문에 대한 답변은 이미 받았지만 레이아웃을 상당히 다루었 기 때문에 플로팅 요소에 대한 몇 가지 전통적인 문제를 해결하는 대안을 추가하고 싶었습니다.
여기에서 업데이트 된 예제를 볼 수 있습니다.
http://jsfiddle.net/Sohnee/EMaDB/1/
의미 론적 요소와 함께 HTML 4.01을 사용하든 HTML5를 사용하든 차이가 없습니다 (아직없는 경우 왼쪽 및 오른쪽 컨테이너를 display : block으로 선언해야합니다).
CSS
.left {
background-color: Red;
float: left;
width: 50%;
}
.right {
background-color: Aqua;
margin-left: 50%;
}
HTML
<div class="left">
<p>I have updated this example to show a great way of getting a two column layout.</p>
</div>
<div class="right">
<ul>
<li>The columns are in the right order semantically</li>
<li>You don't have to float both columns</li>
<li>You don't get any odd wrapping behaviour</li>
<li>The columns are fluid to the available page...</li>
<li>They don't have to be fluid to the available page - but any container!</li>
</ul>
</div>
div를 사용하지 않고도 콘텐츠를 열에 레이아웃 할 수있는 CSS에 다소 깔끔한 (새롭지 만) 추가 기능도 있습니다.
column-count: 2;
이제 5 년 전이 질문이 처음 제기되었을 때보 다 훨씬 더 간단한 해결책이 있습니다. CSS Flexbox는 원래 요구되었던 두 개의 열 레이아웃을 쉽게 만듭니다. 이것은 원래 질문의 표에 해당하는 베어 본입니다.
<div style="display: flex">
<div>AAA</div>
<div>BBB</div>
</div>
Flexbox의 좋은 점 중 하나는 컨테이너 크기에 맞게 자식 요소를 축소하고 확장하는 방법을 쉽게 지정할 수 있다는 것입니다. 위의 예를 확장하여 상자를 페이지의 전체 너비로 만들고 왼쪽 열을 최소 75px 너비로 만들고 오른쪽 열을 늘려 남은 공간을 캡처합니다. 또한 스타일을 적절한 블록으로 가져오고, 열이 분명하도록 배경색을 할당하고, 일부 구형 브라우저에 대한 레거시 Flex 지원을 추가합니다.
<style type="text/css">
.flexbox {
display: -ms-flex;
display: -webkit-flex;
display: flex;
width: 100%;
}
.left {
background: #a0ffa0;
min-width: 75px;
flex-grow: 0;
}
.right {
background: #a0a0ff;
flex-grow: 1;
}
</style>
...
<div class="flexbox">
<div class="left">AAA</div>
<div class="right">BBB</div>
</div>
Flex는 비교적 새롭기 때문에 IE 8 및 IE 9를 지원해야하는 경우 사용할 수 없습니다. 그러나이 글을 쓰는 시점에서 http://caniuse.com/#feat=flexbox 는 시장의 94.04 %가 사용하는 브라우저의 부분적 지원을 나타냅니다.
음, 가장 쉬운 방법 을 원한다면
<div class="left">left</div>
<div class="right">right</div>
.left {
float: left;
}
다른 레이아웃 요구 사항에 따라 그 이상이 필요할 수 있습니다.
이전의 모든 답변은 첫 번째 열이 끝나고 두 번째 열이 시작되는 하드 코딩 된 위치 만 제공합니다. 나는 이것이 필요하지 않거나 심지어 원하지 않을 것이라고 예상했을 것입니다.
최근 CSS 버전 columns은 열 기반 레이아웃을 매우 쉽게 만드는 속성에 대해 알고 있습니다. 이전 브라우저의 경우 -moz-columns및 -webkit-columns도 포함해야합니다 .
다음은 각각의 너비가 200 픽셀 이상인 경우 최대 3 개의 열을 생성하는 매우 간단한 예입니다. 그렇지 않으면 더 적은 열이 사용됩니다.
<html>
<head>
<title>CSS based columns</title>
</head>
<body>
<h1>CSS based columns</h1>
<ul style="columns: 3 200px; -moz-columns: 3 200px; -webkit-columns: 3 200px;">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four</li>
<li>Item five</li>
<li>Item six</li>
<li>Item eight</li>
<li>Item nine</li>
<li>Item ten</li>
<li>Item eleven</li>
<li>Item twelve</li>
<li>Item thirteen</li>
</ul>
</body>
</html>
HTML5 방식으로 수행하려는 경우 (이 특정 코드는 <article>각 블로그 항목 티저에 대해 한 번씩 여러 번 사용되는 블로그와 같은 작업에서 더 잘 작동합니다 . 궁극적으로 요소 자체는 그다지 중요하지 않으며 스타일과 요소 배치입니다. 원하는 결과를 얻을 수 있습니다) :
<style type="text/css">
article {
float: left;
width: 500px;
}
aside {
float: right;
width: 200px;
}
#wrap {
width: 700px;
margin: 0 auto;
}
</style>
<div id="wrap">
<article>
Main content here
</article>
<aside>
Sidebar stuff here
</aside>
</div>
나는 이것이 오래된 게시물이라는 것을 알고 있지만 2 펜스를 추가 할 것이라고 생각했습니다. 거의 사용되지 않고 자주 잊어 버린 설명 목록은 어떻습니까? 간단한 CSS로 정말 깨끗한 마크 업을 얻을 수 있습니다.
<dl>
<dt></dt><dd></dd>
<dt></dt><dd></dd>
<dt></dt><dd></dd>
</dl>
이 예제를 살펴보십시오 http://codepen.io/butlerps/pen/wGmXPL
이 코드를 사용하면 두 개의 열을 추가 할 수있을뿐만 아니라 원하는만큼 많은 열을 추가하고 왼쪽 또는 오른쪽으로 정렬하고 색상을 변경하고 링크를 추가 할 수 있습니다. Fiddle 링크도 확인하세요.
바이올린 링크 : http://jsfiddle.net/eguFN/
<div class="menu">
<ul class="menuUl">
<li class="menuli"><a href="#">Cadastro</a></li>
<li class="menuli"><a href="#">Funcionamento</a></li>
<li class="menuli"><a href="#">Regulamento</a></li>
<li class="menuli"><a href="#">Contato</a></li>
</ul>
</div>
CSS는 다음과 같습니다
.menu {
font-family:arial;
color:#000000;
font-size:12px;
text-align: left;
margin-top:35px;
}
.menu a{
color:#000000
}
.menuUl {
list-style: none outside none;
height: 34px;
}
.menuUl > li {
display:inline-block;
line-height: 33px;
margin-right: 45px;
}
CSS Multiple Columns 속성을 사용하여 텍스트 열을 만들 수 있습니다 . 테이블이나 여러 div가 필요하지 않습니다.
HTML
<div class="column">
<!-- paragraph text comes here -->
</div>
CSS
.column {
column-count: 2;
column-gap: 40px;
}
https://www.w3schools.com/css/css3_multiple_columns.asp 에서 CSS 다중 열에 대해 자세히 알아보십시오.
<div id"content">
<div id"contentLeft"></div>
<div id"contentRight"></div>
</div>
#content {
clear: both;
width: 950px;
padding-bottom: 10px;
background:#fff;
overflow:hidden;
}
#contentLeft {
float: left;
display:inline;
width: 630px;
margin: 10px;
background:#fff;
}
#contentRight {
float: right;
width: 270px;
margin-top:25px;
margin-right:15px;
background:#d7e5f7;
}
분명히 당신은 당신의 사이트뿐만 아니라 색상 등에 맞게 열의 크기를 조정해야하지만 그렇게해야합니다. 또한 ContentLeft 및 ContentRight 너비가 콘텐츠 너비 (여백 포함)를 초과하지 않는지 확인해야합니다.
반응하도록 몇 가지 작은 변경 사항
<style type="text/css">
#wrap {
width: 100%;
margin: 0 auto;
display: table;
}
#left_col {
float:left;
width:50%;
}
#right_col {
float:right;
width:50%;
}
@media only screen and (max-width: 480px){
#left_col {
width:100%;
}
#right_col {
width:100%;
}
}
</style>
<div id="wrap">
<div id="left_col">
...
</div>
<div id="right_col">
...
</div>
</div>
참고 URL : https://stackoverflow.com/questions/6385293/simple-two-column-html-layout-without-using-tables
'code' 카테고리의 다른 글
| Visual Studio 패키지 관리자 콘솔의 바로 가기 키? (0) | 2020.11.29 |
|---|---|
| jQuery로 모든 ID를 얻는 방법은 무엇입니까? (0) | 2020.11.29 |
| JQuery로 부트 스트랩 탭 활성화 (0) | 2020.11.29 |
| IntellJ IDEA에서 디버거 포트를 열 수 없습니다. (0) | 2020.11.29 |
| 속성 값이 변경 될 때마다 이벤트를 발생합니까? (0) | 2020.11.29 |