相关疑难解决方法(0)

给定一个模板,由于其他要求无法修改HTML,如何在HTML中不按顺序显示(重新排列)div另一个上面的模板div？两者都div包含高度和宽度不同的数据.

<div id="wrapper">
    <div id="firstDiv">
        Content to be below in this situation
    </div>
    <div id="secondDiv">
        Content to be above in this situation
    </div>
</div>
Other elements

希望很明显,期望的结果是:

Content to be above in this situation
Content to be below in this situation
Other elements

当尺寸固定时,很容易将它们定位在需要的位置,但是当内容变化时我需要一些想法.为了这种情况,请仅考虑两者的宽度为100%.

我特意寻找一个只有CSS的解决方案(如果不能解决的话,它可能必须满足其他解决方案).

此后还有其他元素.鉴于我所展示的有限场景,我们提到了一个很好的建议 - 假设它可能是最好的答案,但我也希望确保后面的元素不会受到影响.

我的网站上有一个导航菜单,这是一个无序列表.项目按从左到右的顺序自然显示,并按正确顺序显示.它看起来像这样:

|[--1--][-2-][----3----][--4--].......|
|[---5---][-6-][-----7-----][-8-].....|
|[------9------][----10----]..........|

显然,如果我将所有列表项("li")向右浮动,它们将显示在我希望它们加入的位置 - 但是按相反的顺序:

|.......[--4--][----3----][-2-][--1--]|
|.....[-8-][-----7-----][-6-][---5---]|
|..........[----10----][------9------]|

我喜欢定位,但我不想要颠倒顺序.我需要它看起来像这样:

|.......[--1--][-2-][----3----][--4--]|
|.....[---5---][-6-][-----7-----][-8-]|
|..........[------9------][----10----]|

我提出的限制是我不能以相反的顺序重写菜单HTML.我想单独用CSS做这件事.据推测,这可以通过将无序列表("ul")浮动到右侧,并将列表项(li)浮动到左侧来完成.但是,我这样做并不成功,因为我的CSS非常小,我不确定我能错过什么.

是否可以在不更改HTML的情况下实现所需的样式？

我需要div水平并排堆叠两个元素,其中右边的元素应该自动调整其大小到其内容(最大给定宽度),左边的元素应该只使用左边的空间.

像这样的东西:

到目前为止没问题.我设法通过向右浮动div并将左边的溢出设置为隐藏来实现此目的:

HTML:

<div class="frame">
    <div class="right">
        I adjust my with to my content but still need to know my boundaries if I'm floated right (max-width)
    </div>

    <div class="left">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, …

我有一个使用angularjs的图像列表.我想在每个图像的右上角显示一个关闭的图标图像.请帮我搞CSS,下面是列出图片的代码.

<div ng-repeat="file in imagefinaldata" style="display:inline;">
    <img  height=200 width=250 data-ng-if="store.imageUrl !== ''" ng-src="{{store.imageUrl}}{{file}}"  class="imgResponsiveMax" alt=""/>
    <img class="close" src="http://wecision.com/enterprise/images/icons/closeIcon.png"  />
</div>