HTML-Raster-Layout mit Rahmen-Kollaps

Question

Ich habe eine Liste von Daten auf einer Webseite, die ich als Raster anzeigen möchte. Klassischerweise hätte ich das mit <table> gemacht, aber die Daten sind nicht semantisch tabellarisch, und deshalb gibt es keinen Grund, eine feste Anzahl von Spalten zu haben (ich möchte, dass die Zellen automatisch umbrechen und als Breite des Elternelements neu fließen) Änderungen).

Ich kann dies tun, indem Sie die Anzeigeelemente auf display: inline-block setzen und ihre width setzen. Das macht, was ich in Bezug auf Layout will. Es verursacht jedoch auch Probleme, wenn ich einen border einstellen möchte; Die Grenze wird zwischen den Elementen doppelt angezeigt und nur auf der Außenseite. Wenn ich eine Tabelle verwende, würde ich border-collapse: collapse setzen, die es funktionieren würde. Aber das scheint nichts mit der inline-block Lösung zu tun.

Wie kann ich die Grenzen zwischen aufeinander folgenden inline-block Elementen reduzieren? Oder gibt es eine andere Möglichkeit, ein Rasterlayout zu erstellen, um dies zu ermöglichen?

Answer 1

nowdays könnten Sie flex verwenden.

Für die Grenzen, können Sie sie von einem Schatten ziehen und eine negative Marge fügen Sie sie zu überlappen:

ul , li{ 
 
    display:flex; 
 
    flex-wrap:wrap; 
 
    padding:1em; 
 
} 
 
li { 
 
    min-width:40px;/* you can let content decide */ 
 
    min-height:40px;/* you can let content decide */ 
 
    box-shadow:inset 0 0 0 1px; 
 
    margin:0 -1px -1px 0; 
 
    /* flex makes also x,y alignement easy */ 
 
    align-items:center; 
 
    justify-content:center; 
 
}

<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    <li>7</li> 
 
    <li>8</li> 
 
    <li>9</li> 
 
    <li>10</li> 
 
    <li>11</li> 
 
    <li>12</li> 
 
    <li>13</li> 
 
    <li>14</li> 
 
    <li>15</li> 
 
    <li>16</li> 
 
    <li>17</li> 
 
    <li>18</li> 
 
    <li>19</li> 
 
    <li>20</li> 
 
    <li>21</li> 
 
    <li>22</li> 
 
    <li>23</li> 
 
    <li>24</li> 
 
    <li>25</li> 
 
    <li>26</li> 
 
    <li>27</li> 
 
    <li>28</li> 
 
    <li>29</li> 
 
    <li>30</li> 
 
    <li>31</li> 
 
    <li>32</li> 
 
    <li>33</li> 
 
    <li>34</li> 
 
    <li>35</li> 
 
    <li>36</li> 
 
    <li>37</li> 
 
    <li>38</li> 
 
    <li>39</li> 
 
    <li>40</li> 
 
    <li>41</li> 
 
    <li>42</li> 
 
    <li>43</li> 
 
    <li>44</li> 
 
    <li>45</li> 
 
    <li>46</li> 
 
    <li>47</li> 
 
    <li>48</li> 
 
    <li>49</li> 
 
    <li>50</li> 
 
    <li>51</li> 
 
    <li>52</li> 
 
    <li>53</li> 
 
    <li>54</li> 
 
    <li>55</li> 
 
    <li>56</li> 
 
    <li>57</li> 
 
    <li>58</li> 
 
    <li>59</li> 
 
    <li>60</li> 
 
    <li>61</li> 
 
    <li>62</li> 
 
    <li>63</li> 
 
    <li>64</li> 
 
    <li>65</li> 
 
    <li>66</li> 
 
    <li>67</li> 
 
    <li>68</li> 
 
    <li>69</li> 
 
    <li>70</li> 
 
    <li>71</li> 
 
    <li>72</li> 
 
    <li>73</li> 
 
    <li>74</li> 
 
    <li>75</li> 
 
    <li>76</li> 
 
    <li>77</li> 
 
    <li>78</li> 
 
    <li>79</li> 
 
    <li>80</li> 
 
    <li>81</li> 
 
    <li>82</li> 
 
    <li>83</li> 
 
    <li>84</li> 
 
    <li>85</li> 
 
    <li>86</li> 
 
    <li>87</li> 
 
    <li>88</li> 
 
    <li>89</li> 
 
    <li>90</li> 
 
    <li>91</li> 
 
    <li>92</li> 
 
    <li>93</li> 
 
    <li>94</li> 
 
    <li>95</li> 
 
    <li>96</li> 
 
    <li>97</li> 
 
    <li>98</li> 
 
    <li>99</li> 
 
    <li>100</li> 
 
</ul>

http://codepen.io/gc-nomade/pen/BpMpZb

Answer 2

Einige mögliche Lösungen durch meinen Kopf schweben:

1) Stellen Sie die Ränder der Blöcke negativ je nachdem, wo sie sind. Sie könnten Klassen haben (d. H. Rechte Kante, linke Kante, sandwichartig) und die Ränder so manipulieren, dass sich die Ränder überlappen.

2) Stellen Sie den linken und rechten Rand für Blöcke in der Mitte auf 0 px ein. Zwei Möglichkeiten, wie ich gehen würde durch:

CSS 
.sandwiched {border:1px 0px 1px 0px;} 
.sandwiched {border-left:0px; border-right:0px;} 

EDIT: Es ist eine gute Idee, über das Leer Ärgernis im Kommentar verknüpft zu lernen. Beachten Sie jedoch, dass durch die Anwendung dieses Fixes die Pixel, die Sie anpassen müssen, verschoben werden.