저는 플로트에 대해 약간 혼란 스럽습니다. 나는 float에 대한 예제를 만들었습니다. http://jsbin.com/pasavifego/edit?html,css,js,output 나는 내 ul의 배경색을 빨간색으로 지정했습니다. 내 모든 리튬이 왼쪽으로 떠있어, 지금 배경색이 보이지 않습니다. 플로트를 제거하면 작동합니다. 누군가 이런 일이 일어난 이유를
플로트가있는 이미지 갤러리를 만들었으므로 모든 것이 잘 작동하지만 이미지의 두 번째 행에 도달하면 문제가 발생합니다. 첫 번째 행에서 이미지 위에 마우스를 가져갈 때마다 두 번째 행 위치의 이미지가 혼란스러워집니다. 여기에 codepen이 있습니다. 는 모든 이미지 위로 가져 가면 시도하고 엉망이되는 방식 번째 행 이미지 참조 .. (내 최근 예술은 cod
내 페이지 아래쪽 부분에 각각 동적으로 생성 된 텍스트의 양이 다양한 두 개의 열과 행이있는 테이블이 있습니다. div (고정 크기)를 플로팅하여 오른쪽 위 모서리에서 필요할 수있는만큼 많은 두 번째 열을 배치하고 필요에 따라 줄 바꿈하는 줄을 배치하고 싶습니다. 예를 들어 div의 하단이 세 번째 행의 중간에있는 경우 해당 행의 텍스트가 div의 왼쪽 및
4 개의 인라인 버튼이있는 네비게이션을 만들고 싶습니다. 그러나 이렇게하면 각 버튼 사이에 약간의 공백이 생깁니다. 나는 display: inline과 display: inline-block을 시도했지만 어느 쪽도 도움이되지 않습니다. 나는 float: left과 작동하도록 할 수는 있지만 일반적으로 수레를 사용하는 것을 좋아하지 않습니다. 다른 방법이 있
이것은 쉽게 대답 할 수있는 질문 일 수 있지만 해결 방법을 찾을 수 없습니다. 나는 내 HTML에 ul 두 개가있다. 또한 각각 li을 float:left으로 설정합니다. 그 이유는 4 열 그리드가 있고 목록 항목을 레이아웃해야하기 때문입니다. 목록에서 내 눈금의 전체 너비를 차지하지 않으면 다음 목록이 같은 줄에서 시작됩니다. 전체 목록은 서로 아래에
명확하게 설명 할 수 있을지, 이것이 가능한지 확실하지 않습니다. HTML/CSS에 대한 기본적인 지식 만 가지고 있습니다. 작은 화면 (휴대 기기)에서 볼 때 부동 요소가있는 방법을 찾고 있는데 이 아닌 float입니다. 단락의 왼쪽에 이미지가 떠 다니지 만 모바일에서 볼 때 텍스트가 나란히있는 이미지가 너무 복잡해집니다. 정상적으로 왼쪽에 떠있는 방법이
제목, 텍스트 및 이미지 목록이 있으며 때로는 텍스트가 충분하지 않을 때 목록이 깨지기 시작합니다. 목록 자체가 중첩되기 시작합니다. <ul>
<li><img style="float:left"><h3>title</h3> ... some text here</li>
<li><img style="float:left"><h3>title</h3>
저는 이미지와 단락으로 구성된 두 개의 열 레이아웃을 사용하려고했습니다. 아이디어는 지그재그 식으로 배치하는 것입니다 (서로 대각선으로 동일한 요소). 코드에서 알 수 있듯이 두 개의 이미지가 왼쪽으로 떠 있고 두 단락이 왼쪽으로 떠 있습니다. 문제는 이미지가 부유하는 단락 주위를 완벽하게 감싸는 동안 단락이 부유 이미지 주위를 둘러 쌀 수 없다는 것입니다
왜 내 메인 콘텐츠에 너비를 추가하면 더 이상 내 접이식 div로 돌아 가지 않습니다. <div style="float:left;width:30%;">
content1 content1 content1 content1 content1 content1 content1 content1
</div>
<div id="mainContent" style=