Question

当我认为我开始掌握花车时，我意识到我一无所知。我尝试将不同宽度的2个div放到我页面右侧：recipe page

我想学习并理解这一点，并感谢任何帮助。这是我尝试做的屏幕截图：http://www.altogether.accountsupport.com/graphics/_recipescreenshot.gif 谢谢，德博拉

这是我到目前为止的编码

<article id="content">


<!-- Start Page Content -->

<div style="float:right; display:inline-block; width:270px; position:relative;">

    <div style="display:inline; float:right; border:#cccccc 1px solid; padding:5px 20px 5px 5px;">
    <div><a href="/pdf/recipes/apps/CaviarCanapes.pdf" target="_blank"><img style="float:left; padding:2px 10px 0px 0px;" src="/graphics/icon-print.gif" width="12" height="15" alt="Printable Christmas Recipes">Print Recipe &#187;</a></div>
    <div style="padding:0 0 5px 22px;">PDF file, 1 pg.</div>
    </div>
    <div style="clear:right;"></div>

    <img src="/graphics/recipes/apps/CaviarCanapes.jpg" style="float:right; padding:20px 0px 10px 30px; width:250px; height:295px; clear:right;" alt="Caviar Canapes">
</div>

<a class="breadcrumb" href="/recipes.html">Christmas Recipes &#187;</a> <a class="breadcrumb" href="/recipes/appetizers.html">Appetizers &#187;</a>
<h1>Caviar Canapes with Salmon Butter</h1>

<div style="padding:0px 0px 30px 0px;">
<script type="text/javascript" src="/scripts/StarsRate/frontend/load.php?id=2&sid=0"></script>
</div>

<div class="addthispad">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_16x16_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_pinterest_share"></a>
<a class="addthis_button_tumblr"></a>
<a class="addthis_button_google_plusone_share"></a>
<a class="addthis_button_email"></a>
<a class="addthis_button_compact"></a><a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=altogether"></script>
<!-- AddThis Button END -->
</div>
<br><br>


<b>Ingredients</b>
<ul>
<li>1/2 cup (1 stick) unsalted butter, softened</li>
<li>3 ounces smoked salmon, finely chopped (approximately 3/4 cup)</li>
<li>2 tablespoons fresh dill, chopped</li>
<li>pinch of pepper.</li>
<li>1 baguette (long, narrow loaf of French bread)</li>
<li>5-6 ounces caviar</li>
<li>parsley for garnishing</li>
</ul><br>

<b>Directions</b>
<ol>
<li>Soften butter by bringing it to room temperature. Mix butter, chopped smoked salmon, dill and pepper in bowl and stir well.</li>
<li>Slice bread on a slant and spread salmon butter on each piece. Top with caviar and garnish with a small sprig of parsely.</li>
</ol><br>

<i>Submitted by Dirk R.</i>


<!-- End Page Content -->

   </article>

Answer 1

如果你想获得图片下面的成分和方向，你应该用

包围它

<div style="clear:both">
    <b>Ingredients</b>
    ...
</div>

Answer 2

所以在你的评论之后，我认为问题是你的代码中有一个额外的结束div标签：

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=altogether"></script>
<!-- AddThis Button END -->
</div>
<br><br>


<b>Ingredients</b>
<ul>

删除它：

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=altogether"></script>
<!-- AddThis Button END -->
<br><br>


<b>Ingredients</b>
<ul>

Answer 3

所有这一切都发生在代码的文章部分。我通过将星级评分和社交共享包装在左浮动内联块div中，然后将打印框和照片包装在右浮动内联块div中，并具有这些内联块的总宽度来实现它div匹配文章宽度。我添加了HTML注释，因此我可以使用右浮动div中的不同宽度照片轻松编写此部分中的其他页面：http://www.altogetherchristmas.com/recipes/appetizers/caviarcanapes.html

我不确定这是否是最好的方法，但它可以在所有主流现代浏览器和iPad上正确显示。如果有人知道更好的方法，请随意分享。但就目前而言，它正在发挥作用。谢谢，德博拉

浮动2分为右，一个在另一个之上

3 个答案: