マークアップを完全に再作成したので、それを使用できます。
これが結果です。（これがどれほど美しいかお気づきですか？）
IE10、IE9、IE8、FF、Chrome でテストしました。また、それぞれから印刷され、魅力のように機能します。
HTML と CSS を組み合わせて記述する必要がある場合 (その理由はわかりませんが、判断するのは誰でしょうか)、私のソリューションを HTML に適用できるようにお手伝いします。
したがって、主なアイデアは、floatものを完全に失い、inline-block代わりに使用することです。
ただし、inline-block(マークアップの改行が原因で) 要素に余分な間隔が追加され、50% がそれよりも少し大きくなるため、列が 1 行に収まりません。その問題を解決するために、多くのトリックの 1 つを使用しました。コンテナに適用font-size:0;し、彼の子供たちにフォントサイズを再適用することによって。また、私はverticaly-align:top;コラムに行かなければなりませんでした。
要約すると、これが最終結果です。
新しい HTML マークアップ
<div class="Container">
<div class="Column">
<span class="Header">Provider:</span>
<span>Name here</span>
</div>
<div class="Column">
<span class="Header">Location:</span>
<span>Name</span>
<br/>
<span>Street Address</span>
<br/>
<span>City, State Zip</span>
<br/>
<span>Phone</span>
</div>
</div>
<div class="Container">
<div class="Column">
<span class="Header">Appointments:</span>
<br/>
<span>No appointments scheduled</span>
</div>
<div class="Column">
<span class="Header">Care Team:</span>
<br/>
<span>Name Here</span>
</div>
</div>
<div class="Container">
<span class="Header">Referrals:</span>
<br/>
<span>No referrals available</span>
</div>
新しい CSS
*
{
margin: 0;
padding: 0;
}
.Container
{
margin-bottom: 5px;
border-top: 1px solid #000000;
font-size: 0;
}
.Container *
{
font-size: medium;
}
.Container .Column
{
display: inline-block;
width: 50%;
vertical-align: top;
}
.Container .Header
{
font-weight: bold;
}
編集:
何らかの理由で、パディングを削除しました。ここにコンテナ内のパディングのフィドルがあります（残りはすべて以前と同じです）
2 インライン スタイルを編集
<div style="margin-bottom: 5px;padding: 5px;border-top: 1px solid #000000;font-size: 0;">
<div style="display: inline-block;width: 50%;vertical-align: top;font-size: medium;">
<span style="font-weight: bold;">Provider:</span>
<span>Name here</span>
</div>
<div style="display: inline-block;width: 50%;vertical-align: top;font-size: medium;">
<span style="font-weight: bold;">Location:</span>
<span>Name</span>
<br/>
<span>Street Address</span>
<br/>
<span>City, State Zip</span>
<br/>
<span>Phone</span>
</div>
</div>
<div style="margin-bottom: 5px;padding: 5px;border-top: 1px solid #000000;font-size: 0;">
<div style="display: inline-block;width: 50%;vertical-align: top;font-size: medium;">
<span style="font-weight: bold;">Appointments:</span>
<br/>
<span>No appointments scheduled</span>
</div>
<div style="display: inline-block;width: 50%;vertical-align: top;font-size: medium;">
<span style="font-weight: bold;">Care Team:</span>
<br/>
<span>Name Here</span>
</div>
</div>
<div style="margin-bottom: 5px;padding: 5px;border-top: 1px solid #000000;">
<span style="font-weight: bold;">Referrals:</span>
<br/>
<span>No referrals available</span>
</div>
インライン スタイル V2
したがって、おそらくフォント修正が機能しない可能性があります。私にとってはうまく機能しているので、デバッグするのは難しいです。別のアプローチを試してみましょう。今回は、マークアップから新しい行を削除して、列の間隔をなくします。この新しいマークアップを試してください。
<div style="margin-bottom: 5px;padding: 5px;border-top: 1px solid #000000;">
<div style="display: inline-block;width: 50%;vertical-align: top;">
<span style="font-weight: bold;">Provider:</span>
<span>Name here</span>
</div><div style="display: inline-block;width: 50%;vertical-align: top;">
<span style="font-weight: bold;">Location:</span>
<span>Name</span>
<br/>
<span>Street Address</span>
<br/>
<span>City, State Zip</span>
<br/>
<span>Phone</span>
</div>
</div>
<div style="margin-bottom: 5px;padding: 5px;border-top: 1px solid #000000;">
<div style="display: inline-block;width: 50%;vertical-align: top;">
<span style="font-weight: bold;">Appointments:</span>
<br/>
<span>No appointments scheduled</span>
</div><div style="display: inline-block;width: 50%;vertical-align: top;">
<span style="font-weight: bold;">Care Team:</span>
<br/>
<span>Name Here</span>
</div>
</div>
<div style="margin-bottom: 5px;padding: 5px;border-top: 1px solid #000000;">
<span style="font-weight: bold;">Referrals:</span>
<br/>
<span>No referrals available</span>
</div>