小编Sun*_*lot的帖子

我有这个,我想用HTML和CSS制作一个立方体,就像上面的图像一样.我最好的尝试:

.mainDiv{
  position: relative;
  width: 206px;
  height: 190px;
  margin: 0px auto;
  margin-top:100px;
}
.square{
  width:100px;
  height:100px;
  background:#c52329;
  border:solid 2px #FFF;
  float:left;
  transform: skew(180deg,210deg);
  position: absolute;
  top: 43px;
}
.square2{
  width:100px;
  height:100px;
  background:#c52329;
  border:solid 2px #FFF;
  float:left;
  transform: skew(180deg,150deg);
  position: absolute;
  left:102px;
  top: 43px;
}
.square3{
  width:100px;
  height:100px;
  background:#c52329;
  border:solid 2px #FFF;
  float:left;
  transform: skew(180deg,180deg);
  position: absolute;
  left: 51px;
  top: -61px;
}

<div class="mainDiv">
  <div class="square"></div>
  <div class="square2"></div>
  <div class="square3"></div>
</div>

我正在研究我的新项目,在此我需要一些不规则的结构.其中之一是:

我取得的成就是:

.mainkite {
  width: 200px;
  height: 200px;
  background: #f00;
  transform: skew(180deg, 180deg) rotate(45deg);
  position: relative;
  margin: 0px auto;
  margin-top: 50px;
  overflow: hidden;
}
.midLine {
  border: solid 1px #000;
  transform: skew(180deg, 180deg) rotate(45deg);
  position: absolute;
  top: 99px;
  width: 140%;
  left: -41px;
}

<div class="mainkite">
  <div class="midLine"></div>
</div>

的jsfiddle

我怎样才能得到我想要的其他形状？

我试图在段落的文本上实现以下动画:

目的是根据左侧的形状设置文本边界的动画.这是我尝试过但我无法弄清楚文本形状的过渡:

.mainDiv {
  width: 600px;
  margin: 0px auto;
  border: solid 1px #000;
  padding: 10px;
  min-height: 200px;
}
.element {
  width: 200px;
  height: 200px;
  background: #e3f5f1;
  float: left;
  margin-right: 5px;
}
.textElement {
  width: 395px;
  float: left;
}

<div class="mainDiv">
  <div class="element"></div>
  <div class="textElement">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type …

我有两个内联跨度.代码示例:

    <div class="comment_content">

        <span class="comment_author"><?= $child_comment['comment_author'] ?></span>
        <span class="comment_text"><?= $child_comment['comment_content'] ?></span>

    </div>

和scss样本:

.comment_content {        
    word-wrap: break-word;
}
.comment_author {
    display: inline-block;
    vertical-align:top;
}
.comment_text {            
    display: inline-block;
    word-wrap: break-word;
    width: 100%;
}

如果我的预期观点必须是:

如果用户输入不带空格的字符串,则字符串不会中断.打破设计:

如何正确打破长话？

我刚刚创建了一个导航栏和一个悬停功能.但现在的问题是,当我将鼠标悬停在HOME,BEDROOMS和CONTACT US上时,颜色在导航栏上从上到下完全没有效果......但在其他人身上(例如:设施服务)颜色有充分的效果.

HTML

<nav class="navbar">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav" style="padding-top:10px">
        <li><span class="details"><strong>Phone</strong> </span><span           class="contacts">021 913 0643</span></li>
        <br/>
        <span class="details"><strong>Email</strong> </span> <a     class="contacts" href="#">info@acaciahouse.co.za </a>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#"><span ></span>Home</a></li>
        <li><a href="#"><span ></span> FACILITIES<br/>
          SERVICES</a></li>
        <li><a href="#">BEDROOMS</a></li>
        <li><a href="#">RATEs <br/>
          & BOOKINGS</a></li>
        <li><a href="#">SURROUNDING<br/>
          ATTRACTIONS</a></li>
        <li><a href="#">CONTACT US</a></li>
      </ul>
    </div>
  </div>
</nav>

CSS

.navbar{
    padding: …

这是我的代码jquery代码...第一次点击不工作,进一步点击工作,也在iphone safari没有发生任何事情.我们是否需要添加特定于safari浏览器的任何内容.任何帮助将不胜感激.

CSS

p.expand-one {
            cursor: pointer;
        }

        p.content-one {
            display:none;
        }

        p.expand-2 {
            cursor: pointer;
        }

        p.content-2 {
            display:none;
        }

HTML

<div class="sitesection">
    <p class="expand-one" onclick="dostuff('.expand-one','.content-one');" > + Click Here To Display The Content </p>
    <p class="content-one">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This is the content that was hidden before, but now is... Well, visible!"</p>
    <p class="content-one">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This is the content that was hidden before, but now is... "</p>

    <p class="expand-2" onclick="dostuff('.expand-2','.content-2');"> + Click Here To Display The Content </p>
    <p class="content-2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This is the content that …