HTML에서 올바르게 표시되지 않는 두 개의 열

debugcn 에 게시 Dev

Smithster

두 개의 열을 나란히 표시하려고합니다 (왼쪽에 4 개 항목이 있고 오른쪽에 3 개, 총 7 개 항목이 있음).

#wrap{
  width:600px;
  margin:0px auto;
  column-count: 2;
}
#left_col {
   float:left;
   width:200px;
}
#right_col{
  float: right;
  width: 200px;
}

<div id="wrap">
  <div id="left_col">
    <a href="number1.php"><img src="number1.png"alt="number1" border="0" align="top" height="65" width="75"/>num1</a>
    <a href="number2.php"><img src="number2.png"alt="number2" border="0" align="top" height="65" width="75"/>num2</a>
    <a href="number3.php"><img src="number3.png"alt="number3" border="0" align="top" height="75" width="65"/>num3</a>
    <a href="number4.php"><img src="number4.png"alt="number4" border="0" align="top" height="65" width="75"/>num4</a>
  </div>
  <div id="right_col">
    <a href="num1.php"><img src="num1.png"alt="num1" border="0" align="top" height="65" width="75"/>number1</a>
    <a href="num2.php"><img src="num2.png"alt="num2" border="0" align="top" height="65" width="75"/>number2</a>
    <a href="num3.php"><img src="num3.png"alt="num3" border="0" align="top" height="65" width="75"/>number3</a>
  </div>
</div>

그리고 내 문제는 그것을 실행할 때의 링크 / 이미지 / 텍스트가에서 left_col와 같이 각 행에 하나의 항목으로 표시 right_col되지 않고 아래 줄에있는 것처럼 함께 텍스트를 표시하지 않는다는 것입니다. 그것.

마이다스

태그 display:block에 추가 a:

#wrap{
  width: 600px;
  margin: 0px auto;
}
#left_col {
   float: left;
   width: 200px;
}
#right_col{
  float: right;
  width: 200px;
}
a {
  display: block;
}

<div id="wrap">
  <div id="left_col">
    <a href="number1.php"><img src="http://lorempixel.com/75/65/technics/1" alt="number1" height="65" width="75"/> Number 1</a>
    <a href="number2.php"><img src="http://lorempixel.com/75/65/technics/2" alt="number2" height="65" width="75"/> Number 2</a>
    <a href="number3.php"><img src="http://lorempixel.com/65/75/technics/3" alt="number3" height="75" width="65"/> Number 3</a>
    <a href="number4.php"><img src="http://lorempixel.com/75/65/technics/4" alt="number4" height="65" width="75"/> Number 4</a>
  </div>
  <div id="right_col">
    <a href="num1.php"><img src="http://lorempixel.com/75/65/technics/5" alt="num1" height="65" width="75"/> Number 1</a>
    <a href="num2.php"><img src="http://lorempixel.com/75/65/technics/6" alt="num2" height="65" width="75"/> Number 2</a>
    <a href="num3.php"><img src="http://lorempixel.com/75/65/technics/7" alt="num3" height="65" width="75"/> Number 3</a>
  </div>
</div>

그러나 이상적으로는 목록을 사용하여 수행해야합니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-9

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

HTML에서 올바르게 표시되지 않는 두 개의 열

HTML에서 올바르게 표시되지 않는 두 개의 열

Gridview에서 올바르게 표시되지 않는 문자열

배열의 Uniq, 올바르게 표시되지 않음

탭에서 올바르게 정렬되지 않는 테두리

Firefox에서 부트 스트랩 열이 올바르게 표시되지 않음

SwiftUI LazyVGrid에 두 개의 열이 표시되지 않음

두 배열이 C에서 올바르게 연결되었는지 확인하십시오.

올바르게 인쇄되지 않는 개별 개체의 배열

Java : 배열의 첫 번째 항목이 올바르게 표시되지 않음

foreach 루프의 배열 값이 올바르게 표시되지 않습니다.

게시물의 댓글이 레일에 올바르게 표시되지 않음

messages.properties에서 큰 따옴표가있는 문자열이 올바르게 표시되지 않음

두 개의 이미지가 올바르게 겹치지 않음

표 테두리가 올바르게 표시되지 않음

표 테두리가 올바르게 표시되지 않음

표 테두리가 올바르게 표시되지 않음

내 코드가 두 개의 다른 문자열을 올바르게 비교하지 않습니다.

AngularJS 배열 값에 HTML 태그가 포함되어 호출시 올바르게 표시되지 않음

WebAPI-서버 측에서 올바르게 역 직렬화되지 않는 개체 배열

Firefox (개발 버전)에서는 올바르게 표시되지만 Chrome 또는 Safari에서는 표시되지 않는 그리드 이미지

RxJS-두 개의 개별 $ http 스트림에서 두 개의 배열을 올바르게 병합

모바일 장치에서 반응 형 열이 올바르게 표시되지 않음

CSS3 : Firefox에서 들쭉날쭉 한 테두리가 올바르게 표시되지 않음

올바르게 빈 배열을 표시하지 않는 각 항목에 대해

Excel에서 시간이 올바르게 표시되지 않음

Wordpress (Genesis) 위젯 열이 올바르게 표시되지 않음

MarkLogic에서 올바르게 분석되지 않은 문자열

pgAdmin 및 뷰어에서 잠긴 기하학 열이 올바르게 표시되지 않음

데이터베이스에서 쿼리 할 때 문자열이 올바르게 표시되지 않음

사용자 지정 비트 맵 개체가 PictureBox에서 올바르게 표시되지 않습니다.