确定div的一面

Question

我想检查div是在左侧还是右侧，这样当div在右侧时它会改变类。这可能与JS有关吗？

这就是我现在所拥有的：

这就是我想要的结果：

所以基本上它只是翻转周围的一切。这是我的代码：

＆＃13;

＆＃13;

.box-area {
  background-color: #BA5e8e;
  padding-right: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
body > div.area > div > div.area-blocks > div > div > div.col-xs-8 > div {
  max-width: 80%;
  margin: 0 auto;
  text-align: center;
  text-transform: uppercase;
  font-family: roboto-thin;
  font-size: 14px;
  color: #fff;
  margin-top: 10px;
}
body > div.area > div > div.area-blocks > div > div > div.col-xs-8 {
  padding: 0 !important;
}
body > div.area > div > div.area-blocks > div > div > div.col-xs-4 > div > img {
  width: 75%;
  height: 100%;
  margin: 5px;
  margin-top: 6px;
  margin-bottom: 6px;
  margin-left: 20px;
}
body > div.area > div > div.area-blocks > div > div > div.col-xs-4 > div {
  padding: 0 !important;
}
body > div.area > div > div.area-blocks > div > div > div.col-xs-4 {
  padding: 0;
}

＆＃13;

<div class="area-blocks">
  <div class="box-area col-xs-6">
    <div class="area-box">
      <div class="col-xs-8">
        <div class="area-file-name">
          <span>
            Bike trips on lombok
          </span>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="area-file-type">
          <img src="includes/img/pdf.png" alt="">
        </div>
      </div>
    </div>
  </div>
  <div class="box-area col-xs-6">
    <div class="area-box">
      <div class="col-xs-8">
        <div class="area-file-name">
          <span>
            Bike trips on lombok
          </span>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="area-file-type">
          <img src="includes/img/pdf.png" alt="">
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

提前致谢。

Answer 1

您不需要JS或jQuery来实现此目的。在CSS中，使用:nth-child(2n)选择器而不是您的类来更改所需元素的每个第二个实例以与右对齐。试试这个：

.box-area {
  background-color: #BA5e8e;
  padding-right: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* this is the boxes to align to the right */
.box-area:nth-child(2n) {
  border-radius: 10px 0 0 10px;
  padding: 0 0 0 10px;
}

body > div.area > div > div.area-blocks > div > div > div.col-xs-8 > div {
  max-width: 80%;
  margin: 0 auto;
  text-align: center;
  text-transform: uppercase;
  font-family: roboto-thin;
  font-size: 14px;
  color: #fff;
  margin-top: 10px;
}
body > div.area > div > div.area-blocks > div > div > div.col-xs-8 {
  padding: 0 !important;
}
body > div.area > div > div.area-blocks > div > div > div.col-xs-4 > div > img {
  width: 75%;
  height: 100%;
  margin: 5px;
  margin-top: 6px;
  margin-bottom: 6px;
  margin-left: 20px;
}
body > div.area > div > div.area-blocks > div > div > div.col-xs-4 > div {
  padding: 0 !important;
}
body > div.area > div > div.area-blocks > div > div > div.col-xs-4 {
  padding: 0;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> 
<div class="area-blocks">
  <div class="box-area col-xs-6">
    <div class="area-box">
      <div class="col-xs-8">
        <div class="area-file-name">
          <span>
            Bike trips on lombok
          </span>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="area-file-type">
          <img src="includes/img/pdf.png" alt="">
        </div>
      </div>
    </div>
  </div>
  <div class="box-area col-xs-6">
    <div class="area-box">
      <div class="col-xs-8">
        <div class="area-file-name">
          <span>
            Bike trips on lombok
          </span>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="area-file-type">
          <img src="includes/img/pdf.png" alt="">
        </div>
      </div>
    </div>
  </div>
</div>

另请注意，我在示例中添加了bootstrap，因为我意识到这是您的示例缺少的样式。

Answer 2

这不是你问题的答案，但我认为这是一个有价值的切线，它不适合评论。

我建议你阅读MDN's Writing efficient CSS。当最小的CSS在渲染速度上产生显着差异时，它就从后面开始。正如他们所提到的那样，现在这不是一个问题，而且他们的一些“永远永远不会做这个”绝对应该带着一丝盐......但它仍然会帮助你写css（和html）更容易使用。

您可能有其他原因要包含额外的<div>等，但您提供给我们的代码与此相同：

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
.box-area {
  background-color: #BA5e8e;
  padding-right: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  text-align: center;
  text-transform: uppercase;
  font-family: roboto-thin;
  font-size: 14px;
  color: #fff;
}

.area-file-name,
.area-file-type {
  padding: 0;
}

.area-file-name div {
  width: 80%;
  margin: 10px auto 0;
}

.area-file-type img {
  width: 75%;
  height: 100%;
  margin: 6px 5px 6px 20px;
}

<div class="area-blocks">
  <div class="box-area col-xs-6">
    <div class="col-xs-8 area-file-name">
      <div>
        Bike trips on lombok
      </div>
    </div>
    <div class="col-xs-4 area-file-type">
      <img src="includes/img/pdf.png" alt="">
    </div>
  </div>
  <div class="box-area col-xs-6">
    <div class="col-xs-8 area-file-name">
      <div>
        Bike trips on lombok
      </div>
    </div>
    <div class="col-xs-4 area-file-type">
      <img src="includes/img/pdf.png" alt="">
    </div>
  </div>
</div>

Answer 3

创建一个JS函数在您的页面上的document.Ready中运行。在你的JS函数中验证div位置。

Answer 4

我不知道我的代码对您有帮助。我只是创建一个css类“box-area-2”并替换为右侧div的box-area。我还评论了我在Html中更改了总共5个更改的位置，以及一个类添加了css。这里也是live fiddle

    .box-area {
  background-color: #BA5e8e;
  padding-right: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.box-area-2 { /* box-area-2 create for right side div */
  background-color: #BA5e8e;
  padding-left: 10px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
body > div.area > div > div.area-blocks > div > div > div.col-xs-8 > div {
  max-width: 80%;
  margin: 0 auto;
  text-align: center;
  text-transform: uppercase;
  font-family: roboto-thin;
  font-size: 14px;
  color: #fff;
  margin-top: 10px;
}
body > div.area > div > div.area-blocks > div > div > div.col-xs-8 {
  padding: 0 !important;
}
body > div.area > div > div.area-blocks > div > div > div.col-xs-4 > div > img {
  width: 75%;
  height: 100%;
  margin: 5px;
  margin-top: 6px;
  margin-bottom: 6px;
  margin-left: 20px;
}
body > div.area > div > div.area-blocks > div > div > div.col-xs-4 > div {
  padding: 0 !important;
}
body > div.area > div > div.area-blocks > div > div > div.col-xs-4 {
  padding: 0;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> 
    <div class="area-blocks">
  <div class="box-area col-xs-6">
    <div class="area-box">
      <div class="col-xs-8">
        <div class="area-file-name">
          <span>
            Bike trips on lombok
          </span>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="area-file-type" style="float:right;"><!-- add float right  -->
          <img src="includes/img/pdf.png" alt="">
        </div>
      </div>
    </div>
  </div>
  <div class="box-area-2 col-xs-6"> <!-- add box-area-2 class here -->
    <div class="area-box">
      <div class="col-xs-4"> <!-- change the postion of the column  -->
        <div class="area-file-type">
          <img src="includes/img/pdf.png" alt="">
        </div>
      </div>
      <div class="col-xs-8"><!-- change the postion of the column  -->
        <div class="area-file-name">
          <span style="float:right;"><!-- add float right  -->
            Bike trips on lombok
          </span>
        </div>
      </div>
    </div>
  </div>
</div>