편집 2 : 내가 원하는 것을 설명하는 또 다른 방법은 3 열, 고정 왼쪽, 확장 센터, 최소 최대 크기 일 수 있습니다. 나는 권리가 고쳐지 길 바라지 않는다. 창가가 줄어들면 나는 붕괴되기를 원합니다. http://jsfiddle.net/Rw8BZ/CSS 3 열 중심 확대 레이아웃이 멋지게 접힙니다.
- 최저 : 이것은 내가 지금까지 무엇을 가지고 : 나는
편집 3 ...
table들, 그리고div의 아무것도 작동에 3 ~ 4 가지 방법으로 시도했습니다 센터링, 잘못된 배치. 핑크색 요소가 녹색보다 축소/줄 바꿈되기를 원합니다. - 좋은 포장, 좋은 너비, 나쁜 센터링. 표. 어쩌면 마진과 함께 사용할 수 있습니다.
- 좋은 포장, 나쁜 너비, 나쁜 센터링.
... 그리고 거기서 더 악화됩니다. 색상은 일러스트 레이션을위한 것이며, 균일 한 bg 색상입니다. 내가 찾을려고
/3 열 레이아웃을 (CSS2는 불행하게도) 왼쪽과 오른쪽이 컴팩트 어디에 중심이 탄성이고 다른 열-상대를 중심으로 만듭니다. 예를 들면, 은 센터 <td>이 width=100% 인 경우에 작동하는 데 사용되었습니다. 그래서 저는 현재 거의 작동하는 display: table을 사용하고 있습니다.
너비가 줄어들 때 나는 중심 열이 여전히 가운데에 맞춰져서 축소되는 것이지만, 왼쪽에 여유가 없을 때는 오른쪽이 감싸기 시작합니다. 그러나 가운데에 width=100%을 사용하면 열을 가운데로 가져 오면 오른쪽 열이 즉시 축소됩니다. 가운데에 width=100%을 사용하지 않으면 오른쪽 열이 확장되고 가운데가 더 이상 다른 열의 가운데에 배치되지 않습니다. 나도 min-width도 max-width가 ... 내가 원하는 일을로 찔러 오른쪽 열에서 작동하는 것 같았다
편집 1 : 나는 그것이 중심에 바로, 아니 width=100%에 최대 폭을 사용하여 변경하는 경우, 오른쪽이 붕괴되지만 원하는대로 확장하면 너비가 유지되지 않습니다. 오른쪽 열은 비례하여 커집니다.
의사-내용은 다음과 같습니다
<div id="header">
<div><img width=214px></div>
<div>Some text, 3 lines, 2-3 words each</div>
<div><ul><li><a>menu</a></li>...</ul><div><img><img><img></div></div>
</div>
왼쪽 열이 이미지 중심 텍스트, 일부 작은 아이콘 이미지를 통해 링크의 오른쪽 짧은 라인입니다. 목록은 메뉴와 같은 가로 목록으로 지정됩니다. 내가 현재 가지고
CSS의는 다음과 같습니다
div#header, div#header * {
margin: 0px;
padding: 0px;
}
div#header {
display: table;
font-family: FranklinGothic,Arial,Helvetica,sans-serif;
text-transform: uppercase;
width: 100%;
}
div#header > div {
display: table-cell;
vertical-align: top;
}
div#header > div:first-child + div {
text-align: center;
width: 100%;
}
div#header > div:first-child + div + div {
text-align: right;
white-space: nowrap;
background-color: blue;
}
div#header li {
padding-left: 1em;
}
div#header li:first-child {
padding-left: 0 !important;
}