Zwei Elemente auf einer Zeile mit jeweils selbem Zwischen- und Seitenabstand?
Hallo,
ich habe längere Zeit versucht, das folgende Problem mit css hinzukriegen, aber ohne Erfolg. Meine Anforderungen sind:
Hier eine Demo bei jfiddle Edit this Fiddle - jsFiddle
sowie der Code:
Ich habe versucht, dieses Layout mit so ziemlich allem, was ich bislang über css weiß, umzusetzen, aber ich habe es mit keiner Positionierungsart geschafft, dass der Abstand zwischen den Elementen exakt den Randabständen entspricht.
Vielen Dank für Eure Tipps bzw. für eine Lösung im Voraus!
Thorsten
Hallo,
ich habe längere Zeit versucht, das folgende Problem mit css hinzukriegen, aber ohne Erfolg. Meine Anforderungen sind:
- flexibles Layout (100% width)
- zwei verschiedene breite (fixe) Elemente sollen auf einer Zeile nebeneinander angeordnet werden
- der Seitenabstand der Elemente soll immer identisch breit sein, d.h. der Abstand zwischen den Elementen soll genauso breit sein wie der Abstand zu den Rändern
Hier eine Demo bei jfiddle Edit this Fiddle - jsFiddle
sowie der Code:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#mytable {
width: 100%;
}
#mytable td {
white-space: nowrap;
}
#mytable td.cnt1 {
width: 200px;
background-color: fuchsia;
}
#mytable td.cnt2 {
width: 160px;
background-color: silver;
}
#mytable td.dist {
background-color: #ffeda0;
}
</style>
</head>
<body>
<ul>
<li>flexibles Layout</li>
<li>zwei verschieden breite Elemente</li>
<li>Zwischen- und Seitenabstände der Elemente sollen flexible, aber immer identisch sein</li>
</ul>
<p><a href="http://jsfiddle.net/ptacS/7/" target="_blank">jsfiddle-Demo</a></p>
<table id="mytable">
<tr>
<td class="dist">same width</td>
<td class="cnt1">large Element1 (200px)</td>
<td class="dist">same width</td>
<td class="cnt2" >Element 2 (160px) </td>
<td class="dist">same width</td>
</tr>
</table>
</body>
</html>Ich habe versucht, dieses Layout mit so ziemlich allem, was ich bislang über css weiß, umzusetzen, aber ich habe es mit keiner Positionierungsart geschafft, dass der Abstand zwischen den Elementen exakt den Randabständen entspricht.
Vielen Dank für Eure Tipps bzw. für eine Lösung im Voraus!
Thorsten
Zuletzt bearbeitet:
