这就是我想要实现的

<pre>
         CONTAINER External Events Box Shrink or Enlarge
<-------------------------------------------------------------------------------------------->
|                      Text LEFT(ED) internal CONTAINER                                      |
|    --------------    --------------------------------------------------   --------------   |
|   | Info li       | |Content li                                        | | Info li       | |
|   | wrapped into  | |shrink or enlarge to contents  OR                 | | wrapped into  | |
|   | hollow circle1| |max size: (External  container width - 2X(info li)| | hollow circle2| |
|    --------------   |---------------------------------------------------  ---------------  |
 ---------------------------------------------------------------------------------------------
</pre>


1-右侧的空心圆全部对齐(参见图片)

2-左侧的空心圆全部对齐(参见图片)

3-动态扩展(放大或缩小)外部
   事件框,用于从外部包裹空心圆(左侧的一个+
   右边第二个+文本容器(包含描述名称行)。

N.B:


如果粗体的名字行到达红色行
(请参见下图)它不能继续
在第二行(表示第一行应为
始终是内联粗体),因此进行推送
向前延伸灰色容器。
如果用较小的角色写的第二行到达红色行
(请参见下图),它必须分解为第四行,
直到完成为止。
(每个元组(hollowCircle1,nameLines,hollowCircle2)都单独包含在其中
包装纸

css - 如何使外部事件框动态扩展并对齐空心圆-LMLPHP

<body ng-controller="MainCtrl">
<div id='external-events'>
  <h4 >Draggable books</h4>

     <li style="display: inline;margin: 0;padding: 0;border: none;list-style-type: none;" ng-repeat="book in books track by $index"
             id="book.id">
          <ul style="margin: 0;padding: 0;border: none;list-style-type: none; display: flex;"  class="fc-event" data-drag="true"  data-jqyoui-options="{revert: 'invalid'}" jqyoui-draggable="{index {{$index}},placeholder:true,animate:true}">

            <li style="margin: 0;padding: 0;border: none;list-style-type: none; display: inline;" class="circle" >
            0</li><br><br><br><br>
            <li style="margin: 0;padding: 0;border: none;list-style-type: none; display: inline;" ng-bind-html="book.content['name']"</li>
            <li style="margin: 0;padding: 0;border: none;list-style-type: none; display: inline;" class="circle" >
            2/10<br></li>
           </ul>
      </li>
  </div>
<div id='calendar-container'>
  <div id='calendar'></div>
</div>
</body>



    的CSS

   ul {
        list-style-type: none;}
    ul.columns>li {
         display: inline-block;
         padding-right: 0cm;
         margin-left: 0px;
    }
    ul.columns>li:before {
        content:"";
        display: list-item;
        position: absolute;
   }
   h4 {
       color: white;
       display: inline;
       border-bottom: 3px solid darken($fendersblue, 10);
       padding-bottom: 8px;
       line-height: 1.75em;
  }
  .fancy3 {
         background-color: darken($fendersblue, 5);
  }
  #calendar
  {
           padding: 0 10px;
           width: 650px;
          float: right;
          margin: 0px 0px 10px 55px;
  }
  #external-events {
      width: 500px;
      padding: 0 0px;
      border: 0px solid #ccc;/* gray moyen*/
      background: #eee;/* #5D6D7E;(Blue mat) */ /* #eee color gray*/
     text-align: left;
}

    #external-events h4 {
      font-size: 30px;
      margin-top: 0;
      padding-top: 1em;
      color:gray;
   }

   #external-events .fc-event {
       cursor: pointer;
       position:relative;
       z-index: 100;
       background: #eee;
   }
   #external-events p {
       margin: 0 18em 0 0;
       font-size: 14px;
       font-weight: bold;
       color: gray; /* color gray */
  }
  .circle {
       position: relative;
       display: inline-block;
       width: 10%;
       height: 25%;
       padding: 0 0px;
       border-radius: 360px;
       /* Just making it pretty */
       @shadow: rgba(0, 0, 0, .1);
       @shadow-length: 4px;
       -webkit-box-shadow: 0 @shadow-length 0 0 @shadow;
       box-shadow: 0 @shadow-length 0 0 @shadow;
       text-shadow: 0 @shadow-length 0 @shadow;
       background: #FFFFFF;/*color white*/
       color: #f05907;/* color red*/
       font-family: Helvetica, Arial Black, sans;
       font-size: 10;
       text-align: center;
   }
   p span
  {
     display: block;
  }
  p:first-line {
     color: gray;
     font-size: 25px;
     font-weight: bold italic;
  }
  p {
      white-space: pre
  }


CSS已包含在my CodePen
 非常感谢。

最佳答案

您的CodePen的内容有些混乱,包括无效的HTML,对标记的使用不合逻辑,样式冲突以及内联样式和CSS定义看似随意(且令人困惑)的混合。

有太多细节要讨论。但是,这是一个使您更接近您所设想的布局的版本,我希望:

HTML:

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <script data-require="[email protected]" src="https://code.angularjs.org/1.2.8/angular.min.js" data-semver="1.0.7"></script>
</head>
<body ng-controller="MainCtrl">
<div id='external-events'>
  <h4 >Draggable books</h4>

          <ul data-drag="true"  data-jqyoui-options="{revert: 'invalid'}" jqyoui-draggable="{index {{$index}},placeholder:true,animate:true}">
            <li class="fc-event" ng-repeat="book in books track by $index"
             id="book.id">
        <div class="circle">0</div>
        <div class="left content" ng-bind-html="book.content['name']"></div>
            <div class="left rating">2/10</div>
        <div class="clear"></div>
        </li>
      </ul>
  </div>
<div id='calendar-container'>
  <div id='calendar'></div>
</div>
</body>
</html>


CSS:

ul {
  list-style-type: none;
}

ul>li {
  display:block;
    padding-right: 0cm;
    margin-left: 0px;
}

h4 {
  color: gray;
  display: inline;
  border-bottom: 3px solid darken($fendersblue, 10);
  padding-bottom: 8px;
  font-size:600;
}

#calendar{
 padding: 0 10px;
 width: 650px;
 float: right;
 margin: 0px 0px 10px 55px;
}

#external-events {
  width: 500px;
  padding: 0 0px;
  border: 0px solid #ccc;/* gray moyen*/
  background: #eee;/* #5D6D7E;(Blue mat) */ /* #eee color gray*/
  text-align: left;
}

#external-events .fc-event {

  cursor: pointer;
  z-index: 100;
  background: #eee;
  border: solid 1px black;
  border-radius: 2px;
  margin-bottom:5px;
}

.content span
{
  color: gray;
}
.fc-event span:first-child
{
  font-size: 25px;
  font-weight: bold italic;
}

.fc-event div
{
  padding:3px;
  margin-right:5px;
  height: 100%;
}

.content
{
  float:left;
  max-width:75%;
}

.clear
{
  clear:both;
}

.circle {
  float:left;
  width: 10%;
  height: 25%;
  padding: 0 10px;
  border-radius: 360px;


  /* Just making it pretty */
  @shadow: rgba(0, 0, 0, .1);
  @shadow-length: 4px;
  -webkit-box-shadow: 0 @shadow-length 0 0 @shadow;
          box-shadow: 0 @shadow-length 0 0 @shadow;
  text-shadow: 0 @shadow-length 0 @shadow;
  background: #FFFFFF;/*color white*/
  color: #f05907;/* color red*/
  font-family: Helvetica, Arial Black, sans;
  font-size: 10;
  text-align: center;
}

.rating
{
  float:right;
  background: #FFFFFF;/*color white*/
  color: #f05907;/* color red*/
  font-family: Helvetica, Arial Black, sans;
  font-size: 10;
  text-align: center;
  border-radius: 360px;
}


JS:

var app = angular.module("app", []);
app.controller("MainCtrl", ['$scope', '$sce', function($scope, $sce){

  $scope.books = [

            {
                id: 'id1',
                content: {
                    name: '<span>Alain du sceau france</span><br><span> Canada Madagascar philipine</span>',
                    price: 'price1',
                    date: 'd1'
                }
            },
            {
                id: 'id2',
                content: {
                    name: '<span>Name zu Long zu Schreiben Bis Here ist Ein Beispiel</span><br><span>Maneschester Canada Madagascar philipine</span>',
                    price: 'price2',
                    date: 'd2'
                }
            },
            {
                id: 'id3',
                content: {
                    name: '<span>name Aleatoire Schwer und zu Leicht Zu Schreiben</span><br><span>Mexico Canada USA France Uk Deutschland Schweiz Madagascar philipine</span>',
                    price: 'price3',
                    date: 'd3'
                }
            }
        ];
  $scope.books.forEach(function(book) {
    book.content.name = $sce.trustAsHtml(book.content.name);
  })

  // initialize the external events
  // -----------------------------------------------------------------

  $('#external-events .fc-event').each(function() {

    // store data so the calendar knows to render an event upon drop
    $(this).data('event', {
      title: $.trim($(this).text()), // use the element's text as the event title
      stick: true // maintain when user navigates (see docs on the renderEvent method)
    });

    // make the event draggable using jQuery UI
    $(this).draggable({
      zIndex: 999,
      revert: true,      // will cause the event to go back to its
      revertDuration: 0  //  original position after the drag
    });

  });

  // initialize the calendar
  // -----------------------------------------------------------------

  $('#calendar').fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    editable: true,
    droppable: true, // this allows things to be dropped onto the calendar
    drop: function() {
      // is the "remove after drop" checkbox checked?
      if ($('#drop-remove').is(':checked')) {
        // if so, remove the element from the "Draggable Events" list
        $(this).remove();
      }
    },
    eventDragStop: function(event, jsEvent, ui, view ) {

                      if(isEventOverDiv(jsEvent.clientX, jsEvent.clientY)) {


                          //////////
                          $('#calendar').fullCalendar('removeEvents', event._id);
                 var el = $( "<div class='fc-event'>" ).appendTo('#external-        events').text(event.id);

    }
            }
  });
var isEventOverDiv = function(x, y) {

                    var external_events = $( '#external-events' );
                    var offset = external_events.offset();
                    offset.right = external_events.width() + offset.left;
                    offset.bottom = external_events.height() + offset.top;

                    // Compare
                    if (x >= offset.left
                        && y >= offset.top
                        && x <= offset.right
                        && y <= offset .bottom) { return true; }
                    return false;

                }

}]);


CodePen演示:https://codepen.io/anon/pen/JwQOMQ?editors=1111

关于css - 如何使外部事件框动态扩展并对齐空心圆,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/54243120/

10-11 02:01