私はこのブログのようなものを取得しようとしています:
しかし、私が得るのは
(私は彼を真似しようとしているわけではありません。明らかにイメージを変更するなどです。)
親コンテナー (サイドバー) の幅が画像の幅よりも小さいため、境界線が切れています。私はよくグーグルで検索しましたが、見つけたのはoverflow:visible
で、どういうわけかまだ機能していません。出力は次のとおりです。
質問の要件に従って、マージン値を負に適用できます。たとえばmargin-left: 15px;
、与えるposition: relative;
ことができ、スタイルも定義する必要がある場合がありますfloat: left;
。
ただし、代わりに、親要素をコンテンツよりも大きく定義することもできます。たとえば、コンテンツの幅が 200 ピクセルで、左右の画像が 15 ピクセル + 15 ピクセル = 30 ピクセルの場合、親要素の幅は 230 ピクセルにする必要があります。 3 つの画像すべての左側にフローティング値を指定して要素を配置し、コンテンツの幅を 200 ピクセルに定義して中央に配置margin: 0 auto;
し、作業を完了します。
必要な要素 (たとえば、{margin-left: -20px }
) のマージンに負の値を割り当ててみてください。
親要素からオーバーフロー プロパティを削除することを忘れないでください。
2 つの簡単な手順で:
overflow: hidden;
し.sidebar .widget
ます。.sidebar h2
幅の違いを補うために、 の両側にマイナスマージンを追加します。