Question

我正在尝试在产品详细信息上创建一个jsp页面。我对CSS有点新意，所以我无法将div元素并排排列。

.nav {
  float: right;
}
* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #F2EEE9;
  font: normal 13px/1.5 Georgia, Serif;
  color: #333;
}
.item {
  background-color: #fff;
  position: relative;
  margin: 30px auto 30px auto;
  width: 978px;
}
.item img {
  display: block;
  margin: auto;
}

<div class="item">
  <div style="background: url(http://placehold.it/370x330); height: 370px; width: 330px;"></div>
    <div class="pdetails">
        </div>
</div>

我想在图片框的右侧添加div元素，但我无法执行此操作。

image preview

Answer 1

将style="display:inline-block"与div一起使用。

这是因为默认情况下<div>是块元素，因此它们将占据页面上的整个行。使用display:inline-block会使其在同一行上对齐，从而表现得像inline元素，但保留其block元素属性。

在Css中阅读有关display properties的更多信息。

编辑：根据问题添加以下样式（虚拟值相应地更改）：

对于包含图像的div：

display: inline-block

.pdetails {
  height: 370px;
  width: 330px;
  display: inline-block;
}

见截图：

enter image description here

Answer 2

<div class="item">
  <div style="background: url(<%=request.getParameter("img")%>); height: 370px; width: 330px; display:inline-block">
  </div>
</div>

Answer 3

float ：float属性指定框（元素）是否应该浮动。

注意：绝对定位的元素会忽略float属性！

float：none | left | right | initial | inherit;

明确： clear属性指定不允许浮动元素浮动的元素的哪一侧

Css语法：

        public static string ToMissingDateJavascript(this DateTime value) {
        string dateString = value.ToString("yyyy-MM-dd");
        return "<a href=\"javascript:SetDate('" + dateString + "');\">" + dateString + "</a>";
    }        

    public static bool IsWeekend(this DateTime value) {
        return value.DayOfWeek == DayOfWeek.Saturday || value.DayOfWeek == DayOfWeek.Sunday;
    }

CSS

<div id="wrapper">
        <div id="leftcolumn">
            Left
        </div>
        <div id="rightcolumn">
            Right
        </div>
    </div>

http://jsfiddle.net/8weSA/1/

Answer 4

你可以简单地通过使两个元素像我在示例中所做的那样向左浮动来实现，或者还有其他方式，如内联和内联块。

.fleft{float:left}

<img class='fleft' src='http://cdn2.expertreviews.co.uk/sites/expertreviews/files/0/69//nexus_6_0134.jpg?itok=lYrhMv6H' height='200px'>
<div class='fright title'>Nexus 6</div>

Answer 5

非常简单。只需使用：

HTML：

<div class="left-align">
..your left item..
</div>

<div class="right-align">
    ...your right item..
    </div>

的CSS：

left-align{
float:left;
width:50%;
}

你只需要给你的左项“float：left”，因为通常正确的项目取决于左项目的宽度和浮动属性。

如何对齐div元素？

5 个答案: