28172 sujets

CSS et mise en forme, CSS3

Bonjour,

je bloque sur un pb qui est peut être simple mais dont je ne vois pas l'issue.

J'ai une row avec 3 colonnes, je souhaiterai mettre une marge à droite sur les 2 premières afin que la troisième soit aligné avec les éléments su dessus.

Donc comment faire pour ne pas appliquer la marge à droite de la dernière colonne et quel % donner aux colonnes pour éviter que la dernière ne se place dessous.

<div class="row clearfix">
		<div class="col-md-4 column">
			<h2>
				Heading
			</h2>
			<p>
				Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
			</p>
			<p>
				<a class="btn" href="#">View details »</a>
			</p>
		</div>
		<div class="col-md-4 column">
        <span class="dayn">
			<h2>
				Heading
			</h2>
			<p>
				Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
			</p>
			<p>
				<a class="btn" href="#">View details »</a>
			</p>
            </span>
		</div>
		<div class="col-md-4 column last">
			<h2>
				Heading
			</h2>
			<p>
				Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
			</p>
			<p>
				<a class="btn" href="#">View details »</a>
			</p>
		</div>
	</div>



.col-md-4{
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  width: 33,333333333%;
}


Merci pour votre aide
Modérateur
Bonjour,

Pour la sélection css des éléments frères tu peux jeter un œil à cet article : Sélectionner les frères d'un élément en CSS il parles des nth-child (comme le propose edenpulse) mais aussi des sélecteur d'adjacence directe et indirecte.

Pour la taille de tes colonnes tu peux les passer en inline-block et leur donner une largeur en % (attention aux espaces insécables et aux marges et padding) ou passer par le Flexible Box Layout (mais un peu moins bien supporté pour le moment).

Bon courage
Merci pour votre aide, la solution de edenpulse me parait plus simple et cela fonctionne Smiley smile

bien que du coup si je mets un background à ma colonne, la dernière ne la prends pas en compte, je vais fouiller pour résoudre cela.