남은 수평 공간을 채우는 방법은 무엇입니까?

https://stackoverflow.com/questions/1032914

06-07-2019
|

문제

나는 2 개의 divs가 있습니다 : 왼쪽에 하나, 페이지 오른쪽에 하나가 있습니다. 왼쪽의 하나는 고정 너비를 가지고 있으며 오른쪽의 하나가 나머지 공간을 채우기를 원합니다.

    #search {
        width: 160px;
        height: 25px;
        float: left;
        background-color: #ffffff;
    }
    #navigation {
        width: 780px;
        float: left;  
        background-color: #A53030;
    }

<div id="search">Text</div>
<div id="navigation">Navigation</div>

해결책

이것은 당신이 원하는 것을 성취하는 것 같습니다.

#left {
  float:left;
  width:180px;
  background-color:#ff0000;
}
#right {
  width: 100%;
  background-color:#00FF00;
}

<div>
  <div id="left">
    left
  </div>
  <div id="right">
    right
  </div>
</div>

다른 팁

Boushley의 대답으로 찾은 문제는 오른쪽 열이 왼쪽보다 길면 왼쪽 주위를 감싸고 전체 공간을 채우는 것이 재개된다는 것입니다. 이것은 내가 찾고 있던 행동이 아닙니다. 많은 '솔루션'을 검색 한 후 나는 이것을 발견했다. 멋진 튜토리얼 세 열 페이지를 만들 때.

저자는 세 가지 다른 방법, 하나는 고정 너비, 하나는 3 개의 가변 열이 있고 하나는 고정 된 외부 열과 가변 너비 중간을 제공합니다. 내가 찾은 다른 예보다 훨씬 우아하고 효과적입니다. CSS 레이아웃에 대한 이해가 크게 향상되었습니다.

기본적으로 위의 간단한 경우, 첫 번째 열을 왼쪽으로 묶고 고정 너비를 제공하십시오. 그런 다음 오른쪽 열에 첫 번째 열보다 약간 더 넓은 왼쪽 마진을 제공하십시오. 그게 다야. 완료. Ala Boushley의 코드 :

여기 데모가 있습니다 스택 스 니펫 & jsfiddle

#left {
  float: left;
  width: 180px;
}

#right {
  margin-left: 180px;
}

/* just to highlight divs for example*/
#left { background-color: pink; }
#right { background-color: lightgreen;}

<div id="left">  left  </div>
<div id="right"> right </div>

Boushley의 예제와 함께 왼쪽 열은 다른 열을 오른쪽으로 유지합니다. 왼쪽 열이 끝나 자마자 오른쪽이 전체 공간을 다시 채우기 시작합니다. 여기서 오른쪽 열은 단순히 페이지에 더 정렬되며 왼쪽 열은 큰 지방 마진을 차지합니다. 흐름 상호 작용이 필요하지 않습니다.

솔루션은 디스플레이 속성에서 나옵니다.

기본적으로 두 개의 div가 테이블 셀처럼 작용하도록해야합니다. 그래서 사용하는 대신 float:left, 당신은 사용해야합니다 display:table-cell 두 div와 동적 너비 div의 경우 설정해야합니다. width:auto; 또한. 두 div는 display:table 재산.

CSS는 다음과 같습니다.

.container {display:table;width:100%}
#search {
  width: 160px;
  height: 25px;
  display:table-cell;
  background-color: #FFF;
}
#navigation {
  width: auto;
  display:table-cell;
  /*background-color: url('../images/transparent.png') ;*/
  background-color: #A53030;
}

*html #navigation {float:left;}

그리고 HTML :

<div class="container">
   <div id="search"></div>
   <div id="navigation"></div>
</div>

중요 : Internet Explorer의 경우 동적 폭 DIV에 플로트 속성을 지정해야합니다. 그렇지 않으면 공간이 채워지지 않습니다.

이것이 당신의 문제를 해결하기를 바랍니다. 원한다면 내가 이것에 대해 쓴 전체 기사를 읽을 수 있습니다. 내 블로그.

이것은 다소 인기있는 질문이므로 BFC를 사용하여 멋진 솔루션을 공유하는 경향이 있습니다.
다음의 코드 펜 샘플 여기.

.left {
  float: left;
  width: 100px;
}
.right {
  overflow: auto;
}

이 경우 overflow: auto 컨텍스트 동작을 트리거하고 올바른 요소를 확장시킵니다 뿐 사용 가능한 나머지 너비까지 .left 사라집니다. 많은 UI 레이아웃에 매우 유용하고 깨끗한 트릭이지만 처음에는 "왜 작동 하는가"를 이해하기가 어렵습니다.

요즘에는 사용해야합니다 flexbox 메소드 (브라우저 접두사가있는 모든 브라우저에 조정 될 수 있음).

.container {
    display: flex;
}

.left {
    width: 180px;
}

.right {
    flex-grow: 1;
}

더 많은 정보: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

구형 버전의 특정 브라우저와의 호환성이 필요하지 않은 경우 (예 : 10 예를 들어 8 이하) calc() CSS 기능 :

#left {
   float:left;
   width:180px;
   background-color:#ff0000;
}

#right {
   float: left;
   width: calc(100% - 180px);
   background-color:#00FF00;
}

@Boushley의 대답이 가장 가까웠지만 지적한 문제는 해결되지 않은 한 가지 문제가 있습니다. 그만큼 오른쪽 Div는 브라우저의 전체 너비를 취합니다. 내용은 예상 너비를 취합니다. 이 문제를 더 잘 보려면 :

<html>
<head>
    <style type="text/css">
    * { margin: 0; padding: 0; }
    body {
        height: 100%;
    }
    #left {
        opacity: 0;
        height: inherit;
        float: left;
        width: 180px;
        background: green;
    }
    #right {
        height: inherit;
        background: orange;
    }
    table {
            width: 100%;
            background: red;
    }
    </style>
</head>
<body>
    <div id="left">
        <p>Left</p>
    </div>
    <div id="right">
        <table><tr><td>Hello, World!</td></tr></table>
    </div>
</body>
</html>

http://jsfiddle.net/79hps/

콘텐츠는 올바른 위치 (Firefox)에 있지만 너비는 올바르지 않습니다. 아동 요소가 너비를 상속하기 시작하면 (예 : 테이블 width: 100%) 브라우저와 동일한 너비가 주어지면 페이지 오른쪽 오른쪽에서 오버 플로우가 오버 플로우 (firefox) (Firefox)를 만들거나 플로우를 눌러 아래로 밀지 않습니다 (크롬).

당신은 할 수 있습니다 이것 좀 고쳐줘 추가하여 쉽게 overflow: hidden 오른쪽 열로. 이것은 당신에게 내용과 div 모두에 대한 올바른 너비를 제공합니다. 또한 테이블은 올바른 너비를 받고 사용 가능한 나머지 너비를 채 웁니다.

나는 위의 다른 솔루션 중 일부를 시도했는데, 그들은 특정 엣지 케이스와 완전히 일하지 않았으며 고치는 것을 보증하기에는 너무 복잡했습니다. 이것은 작동하고 간단합니다.

문제 나 우려가 있으면 자유롭게 제기하십시오.

다음은 허용 된 솔루션에 대한 약간의 수정 사항이 있으며, 이는 오른쪽 열이 왼쪽 열에 떨어지는 것을 방지합니다. 교체 width: 100%; ~와 함께 overflow: hidden; 누군가가 그것을 몰랐다면 까다로운 해결책.

<html>

<head>
    <title>This is My Page's Title</title>
    <style type="text/css">
        #left {
            float: left;
            width: 180px;
            background-color: #ff0000;
        }
        #right {
            overflow: hidden;
            background-color: #00FF00;
        }
    </style>
</head>

<body>
    <div>
        <div id="left">
            left
        </div>
        <div id="right">


right
    </div>
</div>

http://jsfiddle.net/mheqg/2600/

편집] 3 개의 열 레이아웃에 대한 예를 확인하십시오. http://jsfiddle.net/mheqg/3148/

사용 display:flex

<div style="width:500px; display:flex">
   <div style="width:150px; height:30px; background:red">fixed width</div>

   <div style="width:100%; height:30px; background:green">remaining</div>
</div>

Boushley의 대답은 플로트를 사용하여 이것을 배열하기 위해가는 가장 좋은 방법 인 것 같습니다. 그러나 문제가없는 것은 아닙니다. 확장 된 요소 내에서 중첩 된 플로팅은 귀하에게 제공되지 않습니다. 페이지가 깨질 것입니다.

기본적으로 팽창 요소와 관련하여 기본적으로 "가짜"하는 방법은 실제로 떠 다니지 않고 마진을 사용하여 고정형 플로트 요소와 함께 재생됩니다.

문제는 정확히 그 것입니다. 확장 요소는 떠 다니지 않습니다. 확장 요소 안에 둥지를 틀고 있으면 "중첩 된"부유 한 품목은 실제로 중첩되지 않습니다. 당신이 고집하려고 할 때 clear: both; "중첩 된"부유 식품 아래에서, 최상위 수준의 수레를 제거하게됩니다.

그런 다음 Boushley의 솔루션을 사용하려면 다음과 같은 DIV를 배치해야한다고 덧붙이고 싶습니다. .FakeFloat {Height : 100%; 너비 : 100%; 왼쪽으로 뜨다; } 확장 된 div 내에 직접 배치하십시오. 모든 확장 된 div의 내용은이 가짜 플로트 요소 내에서 가야합니다.

이러한 이유로이 특정 경우에 테이블을 사용하는 것이 좋습니다. 플로팅 된 요소는 실제로 원하는 확장을 수행하도록 설계되지 않았지만 테이블을 사용하는 솔루션은 사소합니다. 플로팅은 일반적으로 테이블이 아닌 레이아웃에 더 적합하다는 주장이 제기됩니다. 그러나 어쨌든 떠 다니는 것은 어쨌든 가짜를 사용하지 않습니다. 내 겸손한 의견.

나는 액체 남은 액체에 대한 위의 솔루션을 시도했지만 고정 된 오른쪽이지만 그 중에는 효과가 없었습니다 (질문은 반대에 대한 것이지만 이것이 관련이 있다고 생각합니다). 다음은 다음과 같습니다.

.wrapper {margin-right:150px;}
.wrapper .left {float:left; width:100%; margin-right:-150px;}

.right {float:right; width:150px;}

<div class="wrapper"><div class="left"></div></div>
<div class="right"></div>

비슷한 문제가 있었고 여기서 해결책을 찾았습니다.https://stackoverflow.com/a/16909141/3934886

솔루션은 고정 중심 DIV 및 액체 측면 열을위한 것입니다.

.center{
    background:#ddd;
    width: 500px;
    float:left;
}

.left{
    background:#999;
    width: calc(50% - 250px);
    float:left;
}

.right{
    background:#999;
    width: calc(50% - 250px);
    float:right;
}

고정 왼쪽 열을 원한다면 그에 따라 공식을 변경하십시오.

두 항목 사이의 Flexbox에서 나머지 공간을 채우려는 경우 다음 클래스를 분리하려는 2 사이의 빈 DIV에 추가하십시오.

.fill {
  // This fills the remaining space, by using flexbox. 
  flex: 1 1 auto;
}

그리드 CSS 속성을 사용할 수 있으며 상자가 가장 명확하고 깨끗하며 직관적 인 방법입니다.

#container{
    display: grid;
    grid-template-columns: 100px auto;
    color:white;
}
#fixed{
  background: red;
  grid-column: 1;
}
#remaining{
  background: green;
  grid-column: 2;
}

<div id="container">
  <div id="fixed">Fixed</div>
  <div id="remaining">Remaining</div>
</div>

아무도 사용하지 않는 것이 궁금합니다 position: absolute ~와 함께 position: relative

따라서 또 다른 해결책은 다음과 같습니다.

HTML

<header>
  <div id="left"><input type="text"></div>
  <div id="right">Menu1 Menu2 Menu3</div>
</header>

CSS

header { position: relative;  }
#left {
    width: 160px;
    height: 25px;
}
#right {
    position: absolute;
    top: 0px;
    left: 160px;
    right: 0px;
    height: 25px;
}

JSFIDDLE 예제

/ * * CSS */

#search {
 position: absolute;
 width: 100px;
}
.right-wrapper {
  display: table;
  width: 100%;
  padding-left:100px;
}
.right-wrapper #navigation {
 display: table-cell;
 background-color: #A53030;
}

/ * * html */

<div id="search"></div>
<div class="right-wrapper">
   <div id="navigation"></div>
</div>

나는 이것을위한 매우 간단한 솔루션을 가지고 있습니다! // html

<div>
<div id="left">
    left
</div>
<div id="right">
    right
</div>

// CSS

#left {
float:left;
width:50%;
position:relative;
background-color:red;
}
#right {
position:relative;
background-color:#00FF00;}

링크: http://jsfiddle.net/mheqg/

나는 비슷한 문제가 있었고 잘 작동하는 다음을 생각해 냈습니다.

CSS :

.top {
width: auto;
height: 100px;
background-color: black;
border: solid 2px purple;
overflow: hidden;
}
.left {
float:left;
width:100px;
background-color:#ff0000;
padding: 10px;
border: solid 2px black;
}
.right {
width: auto;
background-color:#00FF00;
padding: 10px;
border: solid 2px orange;
overflow: hidden;
}
.content {
margin: auto;
width: 300px;
min-height: 300px;
padding: 10px;
border: dotted 2px gray;
}

HTML :

<div class=top>top </div>
<div>
    <div class="left">left </div>
    <div class="right">
        <div class="content">right </div>
    </div>
</div>

이 방법은 창이 줄어들 때 랩핑되지 않지만 '콘텐츠'영역을 자동으로 확장합니다. 사이트 메뉴 (왼쪽)의 정적 너비를 유지합니다.

컨텐츠 상자와 왼쪽 세로 상자 (사이트 메뉴) 데모를 자동 확장하려면 :

https://jsfiddle.net/tidan/332a6qte/

위치를 추가하십시오 relative, 제거하다 width 그리고 float 오른쪽의 속성을 추가 한 다음 추가하십시오 left 그리고 right 재산 0 값.

또한 추가 할 수 있습니다 margin left 값을 가진 규칙은 왼쪽 요소의 너비를 기준으로합니다. (+ 사이에 공간이 필요한 경우 일부 픽셀) 위치를 유지합니다.

이 예는 저를 위해 작동합니다.

   #search {
        width: 160px;
        height: 25px;
        float: left;
        background-color: #FFF;
    }

    #navigation {  
        display: block;  
        position: relative;
        left: 0;
        right: 0;
        margin: 0 0 0 166px;             
        background-color: #A53030;
    }

.container {
  width:100%;
  display:table;
  vertical-align:middle;
}

.left {
  width:100%;
  display:table-cell;
  text-align:center;
}

.right {
  width:40px;
  height:40px;
  display:table-cell;
  float:right;
}

<div class="container">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div

이 시도. 그것은 나를 위해 일했다.

나는이 문제에 대해 이틀 동안 작업 해 왔으며 귀하와 다른 사람이 반응 형 고정 너비를 남기고 오른쪽이 왼쪽 주위를 감싸지 않고 화면의 나머지 부분을 채우는 솔루션을 가지고 있습니다. 내가 생각하는 의도는 모바일 장치뿐만 아니라 브라우저에서 페이지를 반응하는 것입니다.

코드는 다음과 같습니다

// Fix the width of the right side to cover the screen when resized
$thePageRefreshed = true;
// The delay time below is needed to insure that the resize happens after the window resize event fires
// In addition the show() helps.  Without this delay the right div may go off screen when browser is refreshed 
setTimeout(function(){
    fixRightSideWidth();
    $('.right_content_container').show(600);
}, 50);

// Capture the window resize event (only fires when you resize the browser).
$( window ).resize(function() {
    fixRightSideWidth();
});

function fixRightSideWidth(){
    $blockWrap = 300; // Point at which you allow the right div to drop below the top div
    $normalRightResize = $( window ).width() - $('.left_navigator_items').width() - 20; // The -20 forces the right block to fall below the left
    if( ($normalRightResize >= $blockWrap) || $thePageRefreshed == true ){
        $('.right_content_container').width( $normalRightResize );
        $('.right_content_container').css("padding-left","0px");
        
        /* Begin test lines these can be deleted */
        $rightrightPosition = $('.right_content_container').css("right");
        $rightleftPosition = $('.right_content_container').css("left");
        $rightwidthPosition = $('.right_content_container').css("width");
        $(".top_title").html('window width: '+$( window ).width()+"&nbsp;"+'width: '+$rightwidthPosition+"&nbsp;"+'right: '+$rightrightPosition);
        /* End test lines these can be deleted */
    
    
    }
    else{
        if( $('.right_content_container').width() > 300 ){
            $('.right_content_container').width(300);
        }
        
        /* Begin test lines these can be deleted */
        $rightrightPosition = $('.right_content_container').css("right");
        $rightleftPosition = $('.right_content_container').css("left");
        $rightwidthPosition = $('.right_content_container').css("width");
        $(".top_title").html('window width: '+$( window ).width()+"&nbsp;"+'width: '+$rightwidthPosition+"&nbsp;"+'right: '+$rightrightPosition);
        /* End test lines these can be deleted */
    
    }
    if( $thePageRefreshed == true ){
        $thePageRefreshed = false;
    }
}

/* NOTE: The html and body settings are needed for full functionality
and they are ignored by jsfiddle so create this exapmle on your web site
*/
html {
    min-width: 310px;
    background: #333;
    min-height:100vh;
}

body{
	background: #333;
	background-color: #333;
	color: white;
    min-height:100vh;
}

.top_title{
  background-color: blue;
  text-align: center;
}

.bottom_content{
	border: 0px;
	height: 100%;
}

.left_right_container * {
    position: relative;
    margin: 0px;
    padding: 0px;
    background: #333 !important;
    background-color: #333 !important;
    display:inline-block;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    font-size: 14px;
    font-weight: 400;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    border-radius: 0;
    box-sizing: content-box;
    transition: none;
}

.left_navigator_item{
	display:inline-block;
	margin-right: 5px;
	margin-bottom: 0px !important;
	width: 100%;
	min-height: 20px !important;
	text-align:center !important;
	margin: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
	vertical-align: top;
}

.left_navigator_items {
    float: left;
    width: 150px;
}

.right_content_container{
    float: right;
    overflow: visible!important;
    width:95%; /* width don't matter jqoery overwrites on refresh */
    display:none;
    right:0px;
}

.span_text{
	background: #eee !important;
	background-color: #eee !important;
	color: black !important;
	padding: 5px;
	margin: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="top_title">Test Title</div>
<div class="bottom_content">
    <div class="left_right_container">
        <div class="left_navigator_items">
            <div class="left_navigator_item">Dashboard</div>
            <div class="left_navigator_item">Calendar</div>
            <div class="left_navigator_item">Calendar Validator</div>
            <div class="left_navigator_item">Bulletin Board Slide Editor</div>
            <div class="left_navigator_item">Bulletin Board Slide Show (Live)</div>
            <div class="left_navigator_item">TV Guide</div>
        </div>
        <div class="right_content_container">
            <div class="span_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper maximus tellus a commodo. Fusce posuere at nisi in venenatis. Sed posuere dui sapien, sit amet facilisis purus maximus sit amet. Proin luctus lectus nec rutrum accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut fermentum lectus consectetur sapien tempus molestie. Donec bibendum pulvinar purus, ac aliquet est commodo sit amet. Duis vel euismod mauris, eu congue ex. In vel arcu vel sem lobortis posuere. Cras in nisi nec urna blandit porta at et nunc. Morbi laoreet consectetur odio ultricies ullamcorper. Suspendisse potenti. Nulla facilisi.

Quisque cursus lobortis molestie. Aliquam ut scelerisque leo. Integer sed sodales lectus, eget varius odio. Nullam nec dapibus lorem. Aenean a mattis velit, ut porta nunc. Phasellus aliquam volutpat molestie. Aliquam tristique purus neque, vitae interdum ante aliquam ut.

Pellentesque quis finibus velit. Fusce ac pulvinar est, in placerat sem. Suspendisse nec nunc id nunc vestibulum hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris id lectus dapibus, tempor nunc non, bibendum nisl. Proin euismod, erat nec aliquet mollis, erat metus convallis nulla, eu tincidunt eros erat a lectus. Vivamus sed mattis neque. In vitae pellentesque mauris. Ut aliquet auctor vulputate. Duis eleifend tincidunt gravida. Sed tincidunt blandit tempor.

Duis pharetra, elit id aliquam placerat, nunc arcu interdum neque, ac luctus odio felis vitae magna. Curabitur commodo finibus suscipit. Maecenas ut risus eget nisl vehicula feugiat. Sed sed bibendum justo. Curabitur in laoreet dolor. Suspendisse eget ligula ac neque ullamcorper blandit. Phasellus sit amet ultricies tellus.

In fringilla, augue sed fringilla accumsan, orci eros laoreet urna, vel aliquam ex nulla in eros. Quisque aliquet nisl et scelerisque vehicula. Curabitur facilisis, nisi non maximus facilisis, augue erat gravida nunc, in tempus massa diam id dolor. Suspendisse dapibus leo vel pretium ultrices. Sed finibus dolor est, sit amet pharetra quam dapibus fermentum. Ut nec risus pharetra, convallis nisl nec, tempor nisl. Vivamus sit amet quam quis dolor dapibus maximus. Suspendisse accumsan sagittis ligula, ut ultricies nisi feugiat pretium. Cras aliquam velit eu venenatis accumsan. Integer imperdiet, eros sit amet dignissim volutpat, tortor enim varius turpis, vel viverra ante mauris at felis. Mauris sed accumsan sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut vel magna commodo, facilisis turpis eu, semper mi. Nulla massa risus, bibendum a magna molestie, gravida maximus nunc.</div>
        </div>
    </div>
</div>

여기 저처럼 당신을 위해 일할 수있는 나의 바이올린이 있습니다.https://jsfiddle.net/larry_robertson/62lljapm/

HTML 테이블 요소는 기본적으로 이것을 만듭니다 ... 테이블 너비를 정의하면 열은 항상 전체 테이블 너비에 걸쳐 있습니다. 나머지는 상상력에 관한 것입니다

품목 및 컨테이너에 대한 규칙;

Container: {*** display: table; ***}
Items: {*** display: table-cell; width: 100%; ***}

사용 흰색 공간 : Nowrap; 파괴를위한 마지막 항목의 텍스트.

항목 X% | 항목 y% | 항목 Z%

총 길이는 항상 = 100%!

만약에

Item X=50%
Item Y=10%
Item z=20%

그 다음에

항목 x = 70%

항목 X는 지배적입니다 (첫 번째 항목은 표 CSS 레이아웃에서 지배적입니다)!

노력하다 최대 컨텐츠; 컨테이너에 DIV를 퍼 뜨리기위한 DIV의 속성 :

div[class="item"] {
...
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
...

}

나는 일부 레이아웃을 시도하는이 같은 문제에 부딪쳤다. jqueryui 통제 수단. 일반적인 철학은 이제 "사용입니다 DIV 대신에 TABLE"내 경우에 테이블을 사용하는 것이 훨씬 더 잘 작동했습니다. 특히 두 요소 (예 : 수직 센터링, 수평 센터링 등) 내에서 간단한 정렬이 필요하다면 테이블과 함께 사용할 수있는 옵션은 간단하고 직관적 인 컨트롤을 제공합니다. 이것.

내 솔루션은 다음과 같습니다.

<html>
<head>
  <title>Sample solution for fixed left, variable right layout</title>
  <style type="text/css">
    #controls {
      width: 100%;
    }
    #RightSide {
      background-color:green;
    }
  </style>
</head>

<body>
<div id="controls">
  <table border="0" cellspacing="2" cellpadding="0">
    <TR>
      <TD>
        <button>
FixedWidth
        </button>
      </TD>
      <TD width="99%" ALIGN="CENTER">
        <div id="RightSide">Right</div>
      </TD>
    </TR>
  </table>
</div>
</body>
</html>

CSS를 처음 접했습니다. 그러나 인라인 블록을 사용 하여이 문제를 해결했습니다. 이것 좀 봐: http://learnlayout.com/inline-block.html

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow