Question

我有以下代码：

HTML：

<div class="left-image-right-text">
   <p>
    <img src="someimage.png">
    Some text.
   </p>
</div>

CSS：

.left-image-right-text img {
float: left;
padding: 0 50px 50px 0;
}

但是，这会使文本环绕在图像下方。如何不允许文本在图像下方包裹并成为与图像分开的单独列？

Answer 1

您可以简单地使用flexbox：

CreateItem

(function () {
    "use strict";

    Office.initialize = function (reason) {
        $(document).ready(function () {
            app.initialize();
            $('#fowardToGroups').click(function () { sendNow(); });
        });
    };

    var item_id;
    var mailbox;

    async function sendNow() {
        var item = Office.context.mailbox.item;
        item_id = item.itemId;
        mailbox = Office.context.mailbox;

        var receiver="test@ymail.com";
            var soapToCreateItem='<?xml version="1.0" encoding="utf-8"?>'+
            '                            <soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"'+
            '                                           xmlns:m="http://schemas.microsoft.com/exchange/services/2006/messages"'+
            '                                           xmlns:xsd="http://www.w3.org/2001/XMLSchema"' +
            '                                           xmlns:t="http://schemas.microsoft.com/exchange/services/2006/types"'+
            '                                           xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">'+
            '                               <soap:Header>'+
            '                                   <t:RequestServerVersion Version="Exchange2013" xmlns="http://schemas.microsoft.com/exchange/services/2006/types" soap:mustUnderstand="0" />'+
            '                               </soap:Header>'+
            '                               <soap:Body>'+
            '                                   <m:CreateItem MessageDisposition="SaveOnly">'+
            '                                       <m:SavedItemFolderId> '+
            '                                           <t:DistinguishedFolderId Id="drafts" /> '+
            '                                       </m:SavedItemFolderId> '+
            '                                       <m:Items>'+
            '                                           <t:Message>'+
            '                                               <t:Subject>Suspicious e-mail </t:Subject>'+
            '                                               <t:Body BodyType="HTML">body</t:Body>'+
            '                                               <t:ToRecipients>'+
            '                                                   <t:Mailbox>'+
            '                                                       <t:EmailAddress>'+receiver+'</t:EmailAddress>'+
            '                                                   </t:Mailbox>'+
            '                                               </t:ToRecipients>'+
            '                                           </t:Message>'+
            '                                       </m:Items>'+
            '                                  </m:CreateItem>'+
            '                               </soap:Body>'+
            '                           </soap:Envelope>';


           mailbox.makeEwsRequestAsync(soapToCreateItem, soapToCreateItemCallback);
        }



    function soapToCreateItemCallback(asyncResult) {
        var parser;
        var xmlDoc;

        if (asyncResult.error != null) {
            app.showNotification("EWS Status 1", asyncResult.error.message);
        }
        else {
            var response = asyncResult.value;
            if (window.DOMParser) {
                parser = new DOMParser();
                xmlDoc = parser.parseFromString(response, "text/xml");
            }
            else // Older Versions of Internet Explorer
            {
                xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
                xmlDoc.async = false;
                xmlDoc.loadXML(response);
            }
            var result = xmlDoc.getElementsByTagName("m:ResponseCode")[0].textContent;
            if (result == "NoError") {
                  app.showNotification("Status", "Success !");
            }
            else {
                  app.showNotification("Status", "error : " + result);
            }
        }
      }

  })();

Answer 2

您可以像这样

<span class="text-class"> Some text. Some Text. Some Text</span>

然后将跨度显示设置为表格单元格

.left-image-right-text img {
float: left;
padding: 0 50px 50px 0;

}

.text-class{
  display:table-cell;
}

<div class="left-image-right-text">
   <p>
   <img src="https://picsum.photos/100/100?image=1069">
    <span class="text-class">Some text.
       Some text.
          Some text.   Some text.   Some Some text.
       Some text.
          Some text.   Some text.   Some Some text.
       Some text.
          Some text.   Some text.   Some Some text.
       Some text.
          Some text.   Some text.   Some Some text.
       Some text.
          Some text.   Some text.   Some Some text.
       Some text.
          Some text.   Some text.   Some Some text.
       Some text.
          Some text.   Some text.   Some Some text.
       Some text.
          Some text.   Some text.   Some text.
              Some text.   Some text.   Some Some text.
       Some text.
          Some text.   Some text.   Some Some text.
       Some text.
          Some text.   Some text.   Some Some text.
       Some text.
          Some text.   Some text.   Some Some text.
       Some text.
          Some text.   Some text.   Some Some text.
       Some text.
          Some text.   Some text.   Some text.
          </span>
   </p>
</div>

当图像在DIV中浮动时，删除文本换行

2 个答案: