html + css dynamic width with overflows

HTML에서 다음과 같은 작업을 수행하는 방법을 모르겠다. 솔루션이 엄격하게 html + css, javascript/jquery가 사이트에서 사용되고 있다면 더 선호한다. 내 레이아웃이 자바 스크립트에 의존하는 것을 선호합니다.html + css dynamic width with overflows

섹션 A는 불확실한 너비 목록이며 데이터베이스의 데이터에서 채워 지므로 9em-15em 너비가 될 수 있습니다. 섹션 B에는 오버플로 된 텍스트도 있습니다. A가 내용을 표시하는 데 필요한 너비를 차지하도록하고 B 부분이 너비의 나머지 부분을 차지하도록합니다.

가능하면 어떻게 될까요? 당신은 HTML + CSS는 나에게 좋은 기초를 줄 수있는 좋은 책을 알고 마십시오

--------------------------------------------- 
|   |^|        |^| 
|   | |        | | 
|   | |        | | 
|   | |        | | 
| A  | |    B    | | 
|   | |        | | 
|   | |        | | 
|   | |        | | 
|   | |        | | 
|   | |        | | 
|   |v|        |v| 
----------------------------------------------

이 내가 현재 가지고있는이지만, 섹션 B 오버 플로우는 다음의 div가함으로써 축소하는 "A"목록을 강제하는 경우 받아 들일 수없는 두 줄로 가야합니다.

어쩌면

<div id="SectionA" style="float:left"> 
<div>Just TEst data</div> 
<div>Just data</div> 
... 
<div>Just data</div> 
</div> 
<div id="SectionB" style="float:left"> 
    <!-- A bunch of content here --> 
</div>

출처

2010-08-09 Jose

<div id="SectionA" style="float:left;width:auto;max-width:NUMBERpx"> 
<div>Just TEst data</div> 
<div>Just data</div> 
... 
<div>Just data</div> 
</div> 
<div id="SectionB" style="float:left;width:auto;max-width:NUMBERpx"> 
    <!-- A bunch of content here --> 
</div>

이

출처

2010-08-09 13:21:33 Sotiris

-1

내가

.A {

float로 일부 CSS를 사용하는 것이 작업 할 수 있습니다 : 왼쪽;

}

B는 주위를 작성합니다.

너비를 전혀 제어하지 마십시오. DB에서 가져온 정보의 너비가 자동으로 자동으로 설정됩니다.

높이를 조절하면 b가 아래로 숨어 들어 가지 않도록 할 수 있습니다. 그것에

출처

2010-08-09 13:31:40 MikeEL

찾는 또 다른 방법 :

<div id="SectionB"> 
<div id="SectionA"> 
    <div>Just TEst data</div> 
    <div>Just data</div> 
    ... 
    <div>Just data</div> 
</div> 
<!-- A bunch of content here --> 
</div> 

div#SectionA {max-width:15em; float:left;} 

div#SectionB {width:100%;}

이 작동합니다 완벽하게

출처

2010-08-09 13:43:05 Alex

이 솔루션에서 B의 내용이 B의 열이 A의 열보다 길어질만큼 충분히 큰 경우 ...B 내용은 A 내용 아래로 흐릅니다. 영업 사원은 웹에서 'css multi-column layouts'을 검색하는 것을 고려할 수 있습니다. –

<style> 
#sectiona{ 
float:left; 
overflow:auto} 
#sectiona>div{ 
white-space:no-wrap} 

</style> 

<div id="sectiona" style="float:left"> 
<div>Just TEst data</div> 
<div>Just data</div> 
... 
<div>Just data</div> 
</div> 
<div id="sectionb" style="float:left"> 
    <!-- A bunch of content here --> 
</div>

난 그 일을한다고 생각합니다.

설계도에 동일한 높이가 표시됩니다. 그게 CSS를 사용하여 달성하기가 어렵습니다

출처

2010-08-09 13:50:20

내가 틀렸다면 정정하십시오, 그러나 당신의 구성표는 이전 HTML 생성의 프레임과 유사한 각 섹션에 대한 독립적 인 스크롤바를 필요로하는 것처럼 보입니다. 그렇다면 고정 높이를 가진 섹션 모두에 대해 부모 컨테이너 div가 필요하고 양쪽 섹션의 높이를 100 %로 설정해야합니다.

<!DOCTYPE html> 
<head> 
    <title>Testing Columns</title> 
    <style type="text/css"> 
    #a { float: left; } 
    #b { overflow: hidden; } 
    </style> 
</head> 
<body> 
<div id="a"> 
    <ul> 
     <li>This is</li> 
     <li>Some variable width</li> 
     <li>content</li> 
     <li>for testing</li> 
     <li>stuff</li> 
    </ul> 
</div> 
<div id="b"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mauris erat, porta et pulvinar vel, iaculis sed arcu. Vestibulum non eros quis eros congue scelerisque in sed tortor. Vivamus scelerisque, lorem auctor faucibus tempor, magna diam porttitor leo, vel tempor elit sapien accumsan mauris. Sed interdum est at elit cursus euismod. Donec et erat est, non molestie urna. Nam sollicitudin turpis in nunc viverra tempus. Mauris gravida viverra massa vitae ornare. Integer interdum aliquam viverra. Vivamus ut libero elit, at semper ligula. Sed iaculis risus ut ligula molestie tincidunt. Ut ac felis libero, aliquam mattis tellus. Proin non massa a odio bibendum laoreet in eu ligula. Aliquam ac elit a nisl laoreet commodo. Integer ullamcorper tempor mauris in adipiscing. Suspendisse ultrices enim vel orci adipiscing tincidunt. Praesent justo dui, ullamcorper ut venenatis posuere, molestie in arcu. Sed libero justo, facilisis sit amet luctus sit amet, cursus vel leo.</p> 
    <p>Curabitur quis felis sit amet enim congue euismod vel a nibh. Sed auctor justo in nulla ullamcorper malesuada. Duis eu purus nec quam ornare congue vitae vel dui. Cras faucibus suscipit tincidunt. Nunc rutrum pretium diam ac venenatis. Proin non dui ligula, quis eleifend massa. Phasellus condimentum fringilla velit. Sed aliquet sodales tortor, ut pharetra mauris imperdiet vel. Etiam tempor augue non felis fermentum varius. Praesent facilisis condimentum commodo. Ut mollis tristique eros, non dapibus enim sollicitudin quis. In hac habitasse platea dictumst. Maecenas enim nibh, sollicitudin sit amet adipiscing vitae, aliquet pretium dui. Vivamus lacus quam, fermentum eget adipiscing et, malesuada eget urna.</p> 
</div> 
</body> 
</html>

아주 쉽게 :

<style> 
#frameset { 
    background-color: lightBlue; 
    position: absolute; /* this is my way of emulating frameset */ 
    bottom: 0; /* you can specify height instead if you're */ 
    top: 0; /* not using absolute positioning */ 
    left: 0; right: 0; 
} 
#menu, width { 
    width: auto; 
    height: 100%; 
} 
#menu { 
    background-color: bisque; 
    max-width: 15em; 
    float: left; 
    overflow-y: scroll; /* feel free to change to auto, but remember: 
    scrollbar is appended from inside. If you use script to change its 
    content, sentences that previously just fit in one line may suddenly need 
    a line break in the middle when the scrollbar appears */ 
} 
#content { 
    overflow-y: auto; 
} 
</style> 

<div id="frameset"> 
    <div id="menu">aaaaaaaaaaa</div> 
    <div id="content">b</div> 
</div>

출처

2010-08-19 17:05:07 syockit

나는이 한 번해볼 께. #a은 witdh가 지정되지 않은 상태에서 주위에 뜬다. #b은 으로 인해 #a의 공간을 침범하지 않습니다. 이 솔루션은 IE가 7보다 작을 때는 작동하지 않습니다.

출처

2010-08-19 17:17:28

html + css dynamic width with overflows

답변

관련 문제