CSS를 통한 나누기 처리 방법

-2

3 개 항목마다 한 줄에 3 개의 항목 만 있으면 다음 항목이 다음 줄에 있어야합니다. 나는이 Fiddle에서이 방법을 시도 HTML을 변경하지 않고 그것을하고 싶어하고 그것이 올바른 접근 방식이다 않거나 CSS를 통해 처리 할 수있는 다른 방법이 있는지 궁금CSS를 통한 나누기 처리 방법

br{display: none;} br:nth-child(3n+0) {display: block;} p{display: inline} 

<div> 
    <p><input type="checkbox" name="a" value="a">abc</p><br> 
    <p><input type="checkbox" name="b" value="b">bcd</p><br> 
    <p><input type="checkbox" name="c" value="c">cde</p><br> 
    <p><input type="checkbox" name="d" value="d">def</p><br> 
    <p><input type="checkbox" name="e" value="e">efg</p><br> 
    <p><input type="checkbox" name="f" value="f">fgh</p><br> 
    <p><input type="checkbox" name="g" value="g">ghi</p><br> 
    <p><input type="checkbox" name="h" value="h">hij</p><br> 
    <p><input type="checkbox" name="i" value="i">ijk</p><br> 
    <p><input type="checkbox" name="j" value="j">jkl</p><br> 
    <p><input type="checkbox" name="k" value="k">klm</p><br> 
    <p><input type="checkbox" name="l" value="l">lmn</p><br> 
    <p><input type="checkbox" name="m" value="m">mno</p><br> 
    <p><input type="checkbox" name="n" value="n">nop</p><br> 
    <p><input type="checkbox" name="o" value="o">opq</p><br> 
</div>

출처

2017-01-20 Bharath Selvaraj

당신이, 같은 HTML을 유지해야하는 경우 그런 다음 어떤 클래스를 추가하지 않고 http://codereview.stackexchange.com/ –

에 요청해야합니다 네 그것은 갈 수있는 좋은 방법입니다 . 그러나 부모 div에 클래스를 추가 할 수 있다면 br가 필요하지 않습니다. – Aslam

당신은없이 수레를 사용할 수 있습니다 어떤 브레이크 태그를 추가 :

<div> 
    <p><input type="checkbox" name="a" value="a">abc</p> 
    <p><input type="checkbox" name="b" value="b">bcd</p> 
    <p><input type="checkbox" name="c" value="c">cde</p> 
    <p><input type="checkbox" name="d" value="d">def</p> 
    <p><input type="checkbox" name="e" value="e">efg</p> 
    <p><input type="checkbox" name="f" value="f">fgh</p> 
    <p><input type="checkbox" name="g" value="g">ghi</p> 
    <p><input type="checkbox" name="h" value="h">hij</p> 
    <p><input type="checkbox" name="i" value="i">ijk</p> 
    <p><input type="checkbox" name="j" value="j">jkl</p> 
    <p><input type="checkbox" name="k" value="k">klm</p> 
    <p><input type="checkbox" name="l" value="l">lmn</p> 
    <p><input type="checkbox" name="m" value="m">mno</p> 
    <p><input type="checkbox" name="n" value="n">nop</p> 
    <p><input type="checkbox" name="o" value="o">opq</p> 
</div>

및 CSS에 대한

은 :

div{width: 100%; float: left;} 
p{width: 33.33%; float: left;}

이것은 내가 휴식 태그 대신 선호하는 단지 방법입니다.

Fiddle

참고 : 당신은 그냥 당신이 그들을 추가 한 경우에 대비하여 마진과 패딩에 따라 p 태그의 폭을 조정할 수 있습니다.

출처

2017-01-20 06:31:27 Shashi

HTML을 변경했습니다. 질문에 따라 HTML을 변경할 수 없습니다. – Aslam

네, 그래도 여전히
태그를 없애고 백엔드 등에서 미리 생성 된 태그라고 생각하지 않기 때문에 깨끗한 코드를 생성 할 수 있다면 html을 변경할 수있는 유연성을 가질 수 있습니다. – Shashi

동의합니다. 나는 그것에 대해 물었다. 그가 뭐라고하는지 보자 :) – Aslam

HTML을 변경하지 않고 내가 한 일이 맞다고 생각합니다. 당신이 다음

<div> 
     <p><input type="checkbox" name="a" value="a">abc</p> 
     <p><input type="checkbox" name="b" value="b">bcd</p> 
     <p><input type="checkbox" name="c" value="c">cde</p> 
     <p><input type="checkbox" name="d" value="d">def</p> 
     <p><input type="checkbox" name="e" value="e">efg</p> 
     <p><input type="checkbox" name="f" value="f">fgh</p> 
     <p><input type="checkbox" name="g" value="g">ghi</p> 
     <p><input type="checkbox" name="h" value="h">hij</p> 
     <p><input type="checkbox" name="i" value="i">ijk</p> 
    </div>

과 CSS를 BR을 제거하여 변경하고자하는 경우

div p { 
    width: 30%; 
} 
p{float:left;}

출처

2017-01-20 06:36:48 M3ghana

자식 요소에 33 %의 폭을 추가합니다. 다음은 샘플 코드입니다.

<html> 
 
    <head> 
 
     <style> 
 
      br{display: none;} 
 
      br:nth-child(3n+0) {display: block;} 
 
      p{display: inline} 
 
      div { 
 
       width: 500px; 
 
       float: left; 
 
      } 
 
      div p{ 
 
       width: 33%; 
 
       float: left; 
 
      } 
 
     </style> 
 
    </head> 
 
    <body> 
 
     <div> 
 
      <p><input type="checkbox" name="a" value="a">abc</p><br> 
 
      <p><input type="checkbox" name="b" value="b">bcd</p><br> 
 
      <p><input type="checkbox" name="c" value="c">cde</p><br> 
 
      <p><input type="checkbox" name="d" value="d">def</p><br> 
 
      <p><input type="checkbox" name="e" value="e">efg</p><br> 
 
      <p><input type="checkbox" name="f" value="f">fgh</p><br> 
 
      <p><input type="checkbox" name="g" value="g">ghi</p><br> 
 
      <p><input type="checkbox" name="h" value="h">hij</p><br> 
 
      <p><input type="checkbox" name="i" value="i">ijk</p><br> 
 
      <p><input type="checkbox" name="j" value="j">jkl</p><br> 
 
      <p><input type="checkbox" name="k" value="k">klm</p><br> 
 
      <p><input type="checkbox" name="l" value="l">lmn</p><br> 
 
      <p><input type="checkbox" name="m" value="m">mno</p><br> 
 
      <p><input type="checkbox" name="n" value="n">nop</p><br> 
 
      <p><input type="checkbox" name="o" value="o">opq</p><br> 
 
     </div> 
 
    </body> 
 
</html>

출처

2017-01-20 06:40:33 Nitheesh

답변

관련 문제