Wednesday

JavaScript element alignment

Issue

Consider:

<!DOCTYPE html>
<script src=https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js> </script>
<html>

<head>
    <style>
        Ul {
             list-style-type: none;
             list-style-position: outside;
             margin-left: 5px
        }

        Li {
            color: #c2c2c2;
            margin-left: 10px;
            text-indent: 1px;
            clear: both
        }

        Li:after {
            display: block;
            content: ””;
            height: 8px}

        Cc {
            word-break: break-all;
            word-wrap: break-word;
            color: #000;
            margin-left: -5px;
            display: -webkit-box;}

        ChatBoxStyle {
            text-align: left;
            border:2px  #a1a1a1;
            border-radius: 5px;
            border-top-left-radius: 0;
            padding: 10px 10px 10px 10px;
            background-color: #99CCFF;
            margin: 0px 0px;
        }
        subScript {
            width: 50px;
            color: gray;
            font-size: 12px;
            display: inline-block;
        }
    </style>
</head>

<body>
    <div>
        <div></div>
        <ul>
        <li>
        <cc>
            <div>
                <ChatBoxStyle><span><span>How are you?</span></span></ChatBoxStyle>
                <subScript><label class=”complaintype”>【Yes】</label></subScript>
            </div>
        </cc>
            </li>
        </ul>
    </div>
</body>

</html>

I'm a C++ programmer and I'm developing a chat tool that uses JavaScript. How do I align ChatBoxStyle with the bottom of subScript?

Enter image description here

Solution

following the @Sercan answer but change the display property to flex.

like this:

ul {
  list-style-type: none;
  list-style-position: outside;
  margin-left: 5px
}

li {
  color: #c2c2c2;
  margin-left: 10px;
  text-indent: 1px;
  clear: both
}

li:after {
  display: block;
  content: "";
  height: 8px;
}

.cc {
  word-break: break-all;
  word-wrap: break-word;
  color: #000;
  margin-left: -5px;
  display: flex;
  align-items:flex-end;
}

.chatBoxStyle {
  text-align: left;
  border:2px  #a1a1a1;
  border-radius: 5px;
  border-top-left-radius: 0;
  padding: 10px 10px 10px 10px;
  background-color: #99CCFF;
  margin: 0px 0px;
    padding: 1rem 1rem;
}

.subScript {
  width: 50px;
  color: gray;
  font-size: 12px;
  display: inline-block;
}

.parentContainer {
  margin: 1rem;
  padding: 2rem 2rem;
  text-align: center;
}

.childContainer {
  display: inline-block;
  vertical-align: middle;
}

<div>
  <ul>
    <li>
      <div class="cc parentContainer">
          <div class="chatBoxStyle childContainer">
            <span>How are you?</span>
          </div>

          <div class="complaintype">
            <label class="subScript childContainer">【Yes】</label>
          </div>
        </div>
    </li>
   </ul>
</div>

Answered By - Hossein Shourabi

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Wednesday

JavaScript element alignment

Issue

Solution

0 comments:

Post a Comment

Popular Posts

Labels